Search code examples
angularjsangular-directive

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);
      })
    }
  }
})
Solution

  • 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.