角度指令属性未检测到变化

Question

I'm facing a problem with angular directive.

I want a directive to "change itself" depending on a attribute. Unfortunatly, the watcher on The attribute never claim change.

Here is a fiddle JS Which explain my situation : http://jsfiddle.net/gmjm84m1/ (whenever you change 'something',the watch do not react, if you inspect 'here', you can see that the content attribute as change...)

HTML

<div ng-app="myDirective" ng-controller="x">
<div content="{{something}}" my-directive>
    <p>here</p>
</div>
<p>{{something}}</p>
<input type="text" ng-model="something"></p>

JS :

angular.module('myDirective', []).directive('myDirective', function () {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
        scope.$watch(attrs.content, function (v) {
            console.log('value changed, new value is: ' + v);
        });
    }
  };
});

function x($scope) {
  $scope.something = "yolo";
}

Can Somebody tell me why ? Maybe it's the wrong way ?

Answer 1

Bad way to fix:

    restrict: 'A',
    link: function (scope, element, attrs) {
        scope.$watch(function () { return attrs.content }, function (v) {
            console.log('value changed, new value is: ' + v);
        });
    }

Good way to fix:

   restrict: 'A',
    scope: {
        content: '@'
    },
    link: function (scope, element, attrs) {
        scope.$watch('content', function (v) {
            console.log('value changed, new value is: ' + v);
        });
    }