如何在指令的attrs中觀看財產

Question

我有一個控制器，它有一個不時變化的計數器。
該計數器與指令的屬性相關聯，並在該指令的鏈接函數內讀取。

每次attr值改變時，如何使用指令運行函數？

謝謝。

Answer 1

我正在使用這個方法：

.directive('mydirective',
 [function (){
    return {
      ...
      scope: {
        id: '@',
      },
      controller: function ($scope, $element, $attrs) {
         $attrs.$observe('id', function(passedId) {
           /// do what is needed with passedId
         });
    ...

使用的指令和id傳遞如下：

<div mydirective id="{{someprop.id}}" />

Answer 2

在相應的link函數內:(假設您的屬性稱為counter ，您的范圍變量是： scope ）

scope.$watch(attrs.counter, function (newTime) {
                    //do something with the new Time
});

其他方式，肯定更有效的方式：

插值屬性

在你的指令中，將scope屬性設置如下（它將被隔離）：

scope: { counter: '@'}

只要調用link函數，就會自動觀察counter提供當前值。

'@'比'=' '@'更好，因為您認為您沒有將計數器設置為指令中的新值，這意味着您只需閱讀它。 實際上， =對於雙向數據綁定更有用，但您可能不需要它。

Answer 3

使用attrs.$observe(key, fn) 。 更多信息，請訪問$ compile.directive.Attributes

attrs.$observe('counter',function(counter){

});

相關回答： https ： //stackoverflow.com/a/14907826/2874153

$ observe（）是Attributes對象上的一個方法，因此，它只能用於觀察/觀察DOM屬性的值更改。 它僅在指令內使用/調用。 需要觀察/觀察包含插值的DOM屬性時使用$ observe（即{{}}）。 例如，attr1 =“Name：{{name}}”，然后在一個指令中：attrs。$ observe（'attr1'，...）。 （如果你嘗試范圍。$ watch（attrs.attr1，...）它將無法工作，因為{{}} s - 你將得到未定義。）使用$ watch進行其他操作。

Answer 4

如果可以，將指令更改為隔離范圍並使用=定義。 這將為scope屬性設置雙向綁定：

app.directive('myDirective', function() {

    return {
        scope: { counter: '=' }
    }
});

Answer 5

我必須自己實現這個並找到解決方案！ 不幸的是，當我嘗試。$ watch時，錯誤只是在控制台上噴出。 所以我用$ observe代替。

這是我的解決方案：

angular.module('app').directive('aDate', [
    function() {
        return {
            template: '<span>{{date}}</span>',
            restrict: 'E',
            replace: true,
            link: function(scope, element, attrs) {
                attrs.$observe('date', function (val) {
                    var d = new Date(val);
                    element.text(d);
                });
            }
        };
    }
]);

當元素的date屬性發生變化時，上面的代碼會更改作用域的日期！

干杯!