どのように動的にクラスを変更するのですか？

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のディレクティブにモデルを渡しますが、双方向データバインディングではありません。

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-クラスを置くためにあなたのアプローチと間違って何も考えていません。私はあなたのコードスニペットをこれで再現しようとしましたplunkactive-button私はstyle.cssで背景色を青で定義しました。しかし、私はあなたのngclass属性の式selectedRows.length >=1についてあまり知らないので、私はただ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> 

おそらく、これらの式の戻り値を二重中括弧またはその他の方法でバインドすることでチェックできます。

コードを少し修正した場合は、.directive()のreturnキーワードの末尾にセミコロン（;）を挿入する必要があります。

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>