Question

我有一个看起来像这样的指令。它添加了一个基于布尔值的类。

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

我希望这个指令在我传递给dierctive更新的属性时更新类。我这样传递：gd-show="{{posted}}"

所以类似于监听器或数据绑定。是我正在寻找的。

我尝试添加

    scope: {
        ngShow: '=',
    },

但那也不起作用。

Answer 1

简单的解决方案是使用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');
        }
      });

    }
  };

});

Answer 2

使用ng-class来做这类事情。文档为here。

为什么还会有一个可用的时候写另一个？

Answer 3

您可以避免自己的指令复杂化，并使用现有指令ngClass从模板执行此操作：

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

或者您可以通过{}使用插值：

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

添加侦听器属性指令？

3 个答案: