Question

我尝试编写自定义指令来替换页面上的类似按钮。但是当我将ng-class移动到指令模板中时，它已不再适用了。在自定义指令中包含ng-class是错误的吗？我应该在链接函数中使用addClass和removeClass吗？

HTML：

  <dt-button ngclass="{'active-button': selectedRows.length >=1}" text="tablebuttons.delete" icon="v-delete" ng-click="deleteDialog()"></dt-button>

指令

.directive('dtButton', function() {
    return {
      restrict: 'E',
      scope: {
        icon: '@',
        text: '@',
        ngclass: '='
      },
      link: function(scope, ielem, iattrs) {

      },

      template: 
      '<button ng-class="{{ngclass}}">' +
      '<span class="{{icon}}"></span>' +
      '<p translate="{{text}}">' +
      '</p>' + 
      '</button>'
    }
  })

Answer 1

试试这个。在模板中将class更改为ng-class。您将模型传递给视图中的text指令，而不是2路数据绑定。

template: 
  '<button class="active-button" ng-class="{{ngclass}}">' +
  '<span class="{{icon}}"></span>' +
  '<p translate="{{text}}">' +
  '</p>' + 
  '</button>'

// Code goes here
var app = angular
  .module('MyApp', [])
  .controller('Main', ['$scope',
    function($scope) {
      var vm = this;
      vm.selectedRows = 4;
      vm.deleteDialog = function() {
        console.log(vm.selectedRows);
        vm.selectedRows = 0;

      }

    }
  ])
  .directive('dtButton', function() {
    return {
      restrict: 'E',
      scope: {
        icon: '@',
        text: '@',
        ngclass: '='
      },
      controller: "Main as ctrl",
      link: function(scope, ielem, iattrs) {

      },

      template: '<button  ng-class="ngclass" >' +
        '<p>{{text}}</p>' +
        '</button>'
    }
  });

.active-button {
  background-color: green;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="main-content" ng-app="MyApp" ng-controller="Main as ctrl">
  <div>
    <dt-button ngclass="{'active-button':ctrl.selectedRows >=1}" ng-click="ctrl.deleteDialog()" text="delete"></dt-button>
  </div>
</div>

Answer 2

我认为将ng-class放在指令模板上的方法并没有错。我尝试在此 plunk 重现您的代码段，它会提供正确的类名active-button，我在style.css定义了背景颜色为蓝色。但是因为我对selectedRows.length >=1属性上的表达式ngclass了解不多，所以我只将true值赋予该值，这将始终为该元素提供active-button类。当您将其更改为false时，它将删除active-button类。

我的猜测似乎与你的表达selectedRows.length >=1有关。在以下元素声明中：

<dt-button ngclass="{'active-button': selectedRows.length >=1}" text="tablebuttons.delete" icon="v-delete" ng-click="deleteDialog()"></dt-button>

也许你可以通过使用双花括号或任何其他方式将那些表达式返回值绑定到元素来检查。

对代码进行小幅修正，您可能需要在;内的return关键字末尾添加分号（.directive()）。

Answer 3

试试这个

jimApp = angular.module("mainApp",  []);

jimApp.controller('mainCtrl', function($scope){
  $scope.selectedRows = [0];
  $scope.tablebuttons = {delete:"Delete"};
  $scope.deleteDialog = function(){
    $scope.selectedRows = [];
    }
});

jimApp.directive('dtButton', function() {
    return {
      restrict: 'E',
      scope: {
        icon: '@',
        text: '@',
        myClass: '@'
      },
      link: function(scope, ielem, iattrs) {
        console.log(scope.myClass);
      },

      template: 
      '<button class="{{myClass}}">' +
      '<span class="{{icon}}"></span>' +
      '{{text}}' +
      '</button>'
    }
  })

.active-button{
  background:red;
  }
.inactive-button{
  background:#ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="mainApp" ng-controller="mainCtrl">
  <dt-button my-class="{{selectedRows.length?'active-button':'inactive-button'}}" text="{{tablebuttons.delete}}" icon="v-delete" ng-click="deleteDialog()"></dt-button>
</div>

如何在Angular direcitves中动态更改类？

3 个答案: