我有一个在地图中包含圆圈的表单。 “圈选择器”实现为一个指令,用于呈现GoogleMaps映射并从父作用域(表单所在的位置)更新双向绑定对象(在指令范围内使用'=')。
代码如下:
表单HTML
<!-- View uses controllerAs:"vm" -->
<circle-location-picker circle="vm.circle"></circle-location-picker>
<input type="hidden" ng-model="vm.circle.center" name="center" required>
<input type="hidden" ng-model="vm.circle.radius" name="radius" required>
圈选择器指令(摘录):
angular
.module('frontend')
.directive('circleLocationPicker', CircleLocationPicker);
function CircleLocationPicker() {
return {
templateUrl: 'app/directives/circleLocationPicker/circleLocationPicker.html',
restrict: 'E',
scope: {
'circle': '='
},
controller: MapController
};
function MapController($scope, ...) {
// Called when the circle is changed in the map
function circleChanged() {
var center = $scope.gcircle.getCenter();
$scope.circle.center.latitude = center.lat();
$scope.circle.center.longitude = center.lng();
$scope.circle.radius = $scope.gcircle.getRadius();
}
}
}
这有效,但现在我正在尝试在圆的半径上添加验证器。
要做到这一点,我已经添加了一个指令(this之后),如下所示:
angular
.module('frontend')
.directive('radiusValidator', function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
ctrl.$validators.radius = function (modelValue, viewValue) {
return !viewValue || viewValue > 250;
};
}
}
})
验证器在加载时正确运行,但每当我更改映射中的圆圈时(因此在指令中更改了值,在表单控制器中更新它),它就不会再次运行。此外,在包含半径的输入字段中不会更改该值。
最令人惊讶的是,如果我在表单页面中添加“调试按钮”,onClick只会将vm.circle
的值记录到控制台,则会在字段中更新该值并运行验证程序
我尝试添加$watch(vm.circle, <function that does the log>)
,但它不起作用......
我做错了什么或错过了什么?