Question

我有两个实现独立功能的指令。我试图在element指令中使用属性指令，但是watch不在属性指令上工作。这是jsfiddle链接：http://jsfiddle.net/hsyR5/8/

我希望只要加载了加载的属性值，就会触发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;
  }
})

Answer 1

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

您的尝试与写作类似：

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

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

1 个答案: