angularjs directive 的幾點使用技巧

傳遞參數給directive

<my-dir myindex="$index" title="t1"></my-dir>

app.directive('myDir', function () {
  return {
    restrict: 'E',
    scope: {
      myindex: '='，
      title: '@'
    },
    template:'<div>{{myindex}}</div>',
    link: function(scope, element, attrs){
      console.log('test', scope.myindex)
    }
  };})

參數綁定根據須要，提供如下幾種功能：

• = is two-way binding

• @ simply reads the value (one-way binding)

• & is used to bind functions

DOM元素動態綁定CSS

可使用ng-class命令，判斷邏輯條件來動態的綁定css class給tag，基礎語法爲：

option 1:
function ctr($scope){
   $scope.test =「classname」;
}

<div class=」{{test}}」></div>

option 2:
function Ctr($scope) { 
    $scope.isActive = true;
}

<div ng-class="{true: 'active', false: 'inactive'}[isActive]"></div>

option 3:
function Ctr($scope) { 

}

<div ng-class = "{option.selected == 'active' ? 'active' : 'inactive'}"></div>

也能夠用angular.element (jqLite)來實現此功能：

var ele = document.getElementById(scope.subPhaseId);
angular.element(ele).addClass('active');

angular.element接受String參數或DOM元素。也可直接用.css("k:v")綁定css style。