I'm encountering an issue with an Angular directive.
I'm trying to create a directive that can "change itself" based on an attribute. Unfortunately, the watcher on the attribute isn't detecting any changes.
Here is a fiddle in JavaScript that illustrates my problem: http://jsfiddle.net/gmjm84m1/ (When you change 'something', the watcher doesn't react. However, if you inspect 'here', you can see that the content attribute has changed...)
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 has changed, new value is: ' + v);
});
}
};
});
function x($scope) {
$scope.something = "yolo";
}
Can someone help me understand why this isn't working? Is there a different approach I should take?