javascript - Watch无法在另一个自定义元素指令中使用的自定义属性指令中工作

我有两个指令实现独立的功能。我正在尝试在元素指令中使用属性指令，但是监视无法在属性指令上使用。这是jsfiddle链接：http://jsfiddle.net/hsyR5/8/

我希望每当更改is-loaded属性值时都将触发isLoaded指令手表。

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代码：

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

最佳答案

如果将字符串作为第一个参数传递，请使用scope.$watch，它需要匹配一个scope属性。

您的尝试将类似于编写：

scope.$watch("false", function (){
     ....
});

但是scope.false是未定义的。

由于您不在观察范围属性，因此可以使用返回变量的函数作为第一个参数进行观察

scope.$watch(function (){
     return attrs.isLoaded;/* define what to watch*/
}, function(newVal,oldVal
      if(newVal !=oldVal){
           console.log('isLoaded Changed');
      }
});

您还可以在范围上使用attrs.$observe类似于使用$watch

在第一个指令中，element[0].attributes是不必要的，因为属性已经可以用作link的参数。
您可以使用以下方法更改属性：

attrs.isLoaded = '' + scope.expandMe;

DEMO