監視不在另一個自定義元素指令內使用的自定義屬性指令內工作

我有兩個實現獨立功能的指令。我試圖在元素指令中使用attribute指令，但watch不在屬性指令中工作。這裏是jsfiddle鏈接：http://jsfiddle.net/hsyR5/8/監視不在另一個自定義元素指令內使用的自定義屬性指令內工作

我希望isLoaded指令監視被觸發，只要is-loaded屬性值被改變。

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

來源

2013-11-26 Swapnil Jain

[0] .attributes [ '被加載']的nodeValue whydont只是你直接使用http：/ /jsfiddle.net/hsyR5/9/ –

是的，謝謝你的建議。請解釋爲什麼包裝attrs.isLoaded在函數內工作？感謝您的幫助:) –

使用scope.$watch如果你傳遞一個字符串作爲第一個參數，它需要匹配scope屬性。

您試圖將類似於寫作：

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

但scope.false是不確定的。

既然你不是在看一個範圍properrty您可以使用返回變量的函數看作爲第一個參數

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。可以使用更改屬性：爲什麼是U使用元素

attrs.isLoaded = '' + scope.expandMe;

DEMO

來源

2013-11-26 13:40:49 charlietfl

非常感謝！我只想問一件事。你是對的，元素[0]。屬性不是必需的。但爲什麼不使用「element.attr（'is-loaded'，''+ scope.expandMe）;」工作，但「attrs.isLoaded =''+ scope.expandMe;」作品？ –

如果你使用jQuery類似的方法直接改變元素... angular不知道，所以必須調用'scope。$ apply（）'之後 – charlietfl

監視不在另一個自定義元素指令內使用的自定義屬性指令內工作

回答

相關問題