將屬性指令添加到監聽器？

我有一個看起來像這樣的指令。它增加了一個基於布爾類的類。將屬性指令添加到監聽器？

.directive('gdShow', function(){ 
    return{ 
     restrict: 'A', 
     link: function(scope, elem, attrs){ 
      console.log(attrs.gdShow); 
      if(attrs.gdShow === true){ 
       elem.addClass('gdShow'); 
      }else{ 
       elem.addClass('gdHide'); 
      } 
     } 
    };

我想這個指令來更新類，只要我傳遞給更新的屬性。我通過它是這樣的：gd-show="{{posted}}"

所以像聽衆或數據綁定。是我正在尋找的。

我嘗試添加

scope: { 
     ngShow: '=', 
    },

但是，這也不能工作。

來源

2013-12-18 Himmators

範圍：{ gdShow：'=' }，然後你可以訪問的是「scope.gdShow」 – Neozaru

簡單的解決方法是使用attrs.$observe方法來觀察屬性值的變化。如果你不想要，這並不要求你創建獨立的範圍。

PLUNKER

<div> 
    <label>Username</label> 
    <input type="text" ng-model="username" /> 
</div> 

<div gd-show="{{username}}">HI!</div>

app.directive('gdShow', function(){ 
    return { 
    restrict: 'A', 
    link: function(scope, elem, attrs){ 

     attrs.$observe('gdShow', function(gdShow){ 
     if(gdShow){ 
      elem.removeClass('hide'); 
     } else { 
      elem.addClass('hide'); 
     } 
     }); 

    } 
    }; 

});

來源

2013-12-18 11:47:20 Stewie

如果我們試圖有條件地添加一個類，那麼ng-class可能是值得研究的。 http://docs.angularjs.org/api/ng.directive:ng類無論如何@Stewie在這裏回答了實際的問題。 – rdjs

我第二@ rdjs的評論。 – Stewie

使用ng-class做這樣那樣的事情。該文檔是here。

爲什麼你會寫另一個，而仍然有一個可用？

來源

2013-12-18 12:01:29

我的實際案例比較複雜，包括延遲等。我認爲這只是純粹的js，所以我不想把它帶入問題。 – Himmators

你能避免自己的指令的複雜性，並利用現有的指令，ngClass從模板做到這一點：

<any-element ng-class="{'gdShow': posted, 'gdHide': !posted}"></any-element>

或者你也可以通過{}使用插值：

<any-element class="{{posted ? 'gdShow' : 'gdHide'}}"></any-element>

來源

2013-12-18 12:46:00

我的實際情況是更復雜的延遲等。認爲這只是純js，所以我不想把這個問題帶入。 – Himmators

將屬性指令添加到監聽器？

回答

相關問題