dotnet dotnet - 5 months ago 16
AngularJS Question

The two way binding is not working in this example

I am new to Angularjs. Can some one help to find what's wrong in this. The dual bind is not working in this example.

http://jsfiddle.net/gM2Hg/120/

<body ng-app="animateApp">
<br/> the watch is triggered only on the load of the page, not on subsequent changes to the property "acts"
<div ng-controller="tst">
<input type="button" bn="" acts="acts" value="Add Action" /> {{acts.crop}}
</div>
</body>

var animateAppModule = angular.module('animateApp', [])

animateAppModule.controller('tst', function($scope) {
$scope.acts = {
crop: "test"
};
$scope.$watchCollection('model.acts', function(newValue, oldValue) {
alert("as");
})
})

animateAppModule.directive('bn', function() {
return {
restrict: "A",
scope: {
acts: '='
},
link: function($scope, iElement, iAttrs) {
alert("l");
iElement.click(function() {
alert($scope.acts.crop);
$scope.acts = {
crop: "real"
};
alert($scope.acts.crop);
})
}
}
})

Answer

first you have to write watch functionality like this:

$scope.$watch('acts', function(newValue, oldValue) {
  alert("as");
});

Now you have set apply after you change scope from directive:

$scope.$apply();

Check updated jsFiddle: http://jsfiddle.net/gM2Hg/121/

Hope this will help you. Thanks.