Question

我希望我的自定义指令能够根据绑定到其父作用域的某些值预处理自己的类。但是，我似乎无法获得指令来设置自己的ng-class并在本地范围内执行函数。

directive('testDirective',function(){
     restrict: 'E',
     scope: {
         inputValue: '='
     },
     template: '<div>dynamically styled content</div>',
     bindToController: true,
     controllerAs: 'ctrl',

     compile: function(element){
          element.attr('ng-class', 'ctrl.getClass()');
     },

     controller: function(){
         this.getClass = function(){
             //return array of classes based on value of this.inputValue
         }
     }
});

不幸的是，没有应用样式，因为表达式永远不会被评估，只是被指定为字符串。当我检查DOM元素时，我看到以下内容

ng-class="ctrl.getClass()"

我意识到我可以使用jQuery在链接函数中添加我的类，但是它们不会绑定到我的数据。我也希望尽可能避免使用$ watch。

欢迎任何想法！

Answer 1

让我们假设你有一个这样的css文件：

.myButton1 {
  color: red;
}

.myButton2 {
  color: blue;
}

在您的指令中，您可以使用ng-class执行此操作：

directive('testDirective',function(){
     restrict: 'E',
     scope: {
         inputValue: '='
     },
     template: '<div ng-class="ctrl.getClass()">dynamically styled content</div>',
     bindToController: true,
     controllerAs: 'ctrl',
     controller: function(){
         this.getClass(){
           return (ctrl.inputValue === 'something' ? "myButton1" : "myButton2");
         }
     }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

你的getClass方法必须返回有效的预定义的css类，一个或一个数组。

将ng-class绑定到自定义AngularJS指令中的本地范围表达式

1 个答案: