angularjsdirective의 몇 가지 사용 기교

1501 단어 AngularJS

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 스타일.

    좋은 웹페이지 즐겨찾기