我正在尝试对使用函数映射从指令更新的控制器变量进行监视。变量正在更新并记录在控制台中,但观察它不起作用。
代码段:
的index.html
<body ng-app="myApp" ng-controller="myCtrl">
<div>
<test on-click="update()"></test>
</div>
app.js
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope){
$scope.test = {
value: false
};
$scope.update = function() {
$scope.test.value = !$scope.test.value;
console.log("Update: " + $scope.test.value);
};
$scope.$watch('test', function(newVal){
console.log("Watch: " + newVal.value);
}, true);
});
myApp.directive('test', function($compile){
return {
restrict: 'E',
transclude: true,
replace: true,
scope: {
onClick: '&'
},
template: '<div ng-transclude=""></div>',
link: function(scope, element, attrs) {
var $buttonElem = $('<button>Test</button>').appendTo(element);
$buttonElem.click(function(){
scope.onClick();
});
}
}
});
Plunker Link是:https://plnkr.co/edit/41WVLTNCE8GdoCdHHuFO?p=preview
答案 0 :(得分:2)
问题是该指令使用的代码不是AngularJS的代码而是在其模板中使用ng-click
来引发事件。如果你不能修改指令,那么将事件处理程序包装在$ scope中。$ apply代替。
$scope.update = function() {
$scope.$apply(function(){
$scope.test.value = !$scope.test.value;
console.log("Update: " + $scope.test.value);
});
};