Angular $watch not working on controller variable updated by directive

Question

I am trying to place a watch on controller variable which gets updated from a directive using function mapping. variable is getting updated and logged in console but watch on it not working.

Code Snippet :

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 is : https://plnkr.co/edit/41WVLTNCE8GdoCdHHuFO?p=preview

Can't do it. Consider directive as a third party library which can not be updated. — Prateek, CommentedMay 9, 2016 at 14:15
@Prateek but you can do a $timeout(function() { $scope.$apply(); }); inside your controller update function which would do the same thing (even if it is ugly) — Jeff Lambert, CommentedMay 9, 2016 at 14:22

adam0101 · Accepted Answer · 2016-05-09 14:28:01Z

The problem is that the directive is raising the event using code that is not apart of AngularJS instead of using an ng-click in its template. If you can't modify the directive, then wrap your event handler in $scope.$apply instead.

$scope.update = function() { $scope.$apply(function(){ $scope.test.value = !$scope.test.value; console.log("Update: " + $scope.test.value); }); };

Collectives™ on Stack Overflow

Angular $watch not working on controller variable updated by directive

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related