angularjsdirective의 몇 가지 사용 기교

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 명령을 사용하여 논리적 조건을 판단하여 동적으로 cssclass를 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>

앵글로도 쓸 수 있어요.element(jqLite) 기능:

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

angular.element는 String 매개변수 또는 DOM 요소를 수용합니다.그냥 써도 돼요.css ("k:v") 귀속 css 스타일.