I'm currently working with two directives that handle separate functionalities. I am attempting to utilize the attribute directive within an element directive, but I'm encountering issues with the watch function not working on the attribute directive. You can find the code example on jsfiddle here: http://jsfiddle.net/hsyR5/8/
My goal is to have the isLoaded directive's watch function triggered whenever the value of the is-loaded attribute changes.
HTML:
<div ng-app="myapp">
<div ng-controller="ReportCtrl">
<mydir is-loaded="false" id="change" expand-me="isExpanded" ng-transclude>
<button ng-click="expandIt()"> Expand</button>
</mydir>
</div>
Javascript code:
var myApp = angular.module('myapp', [])
myApp.directive('mydir', function () {
return {
restrict: 'E',
scope : {
expandMe:'='
},
replace: true,
transclude: true,
template : "<div></div>",
link: function (scope, element, attrs) {
scope.$watch('expandMe', function (){
//load the data
console.log('inside mydir directive');
element[0].attributes['is-loaded'].nodeValue = ''+scope.expandMe;
});
}
};
});
myApp.directive('isLoaded', function () {
return {
restrict : 'A',
link: function (scope, element, attrs) {
scope.$watch(attrs.isLoaded, function (){
console.log('isLoaded Changed');
});
}
};
});
myApp.controller('ReportCtrl', function($scope){
$scope.isExpanded = false;
$scope.expandIt = function(){
$scope.isExpanded = !$scope.isExpanded;
}
})