1

我希望我的自定义指令能够根据绑定到其父范围的某些值来预处理自己的类。但是，我似乎无法让指令设置自己的 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 。

欢迎任何想法！

4

1 回答 1

2

假设你有一个这样的 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 类，其中一个或一组。

于 2015-05-26T11:45:51.263 回答