AngularJS: Cách nhắm mục tiêu chỉ thị cụ thể với nhiều trường hợp

Question

Tôi có nhiều phiên bản của chỉ thị và tôi chỉ muốn nhắm mục tiêu một trường hợp cụ thể. Ví dụ: trong mã bên dưới, làm cách nào tôi có thể đảm bảo rằng div có class="one" là số duy nhất được kích hoạt bởi sự kiện $rootScope.$broadcast('myEvent').

JS:

myApp.directive('myDirective', function() { 
    return { 
     restrict: 'A', 
     controller: function(scope, el, attrs) { 
      scope.$on('myEvent', function() { 
       el.css({left: '+=100'}); 
      }); 
     }, 
    };  
}); 

HTML:

<div my-directive class="one"></div> 
<div my-directive class="two"></div> 

Answer 1

Bạn nên làm việc kiểm tra này trong xử lý sự kiện của bạn:

myApp.directive('myDirective', function() { 
    return { 
    restrict: 'A', 
     controller: function(scope, el, attrs) { 
     scope.$on('myEvent', function(ev,args) { 
      //do the check - you could provide a function, a value or something else 
      if(el.hasClass(args.class)){ 
      el.css({left: '+=100'}); 
      } 
     }); 
     }, 
    };  
}); 

Sau đó thêm các thông số trong $ phát sóng

$rootScope.$broadcast('myEvent',{class:'one'}) 

Answer 2

Bạn có thể định nghĩa một thuộc tính mới cho chỉ thị này có sự tham khảo một callback mà sau đó được thực hiện bên trong gọi lại của $ trên:

myApp.directive('myDirective', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      callme: "=" 
     }, 
     controller: function(scope, el, attrs) { 
      scope.$on('myEvent', function() { 
       scope.callme(el) 
      }); 
     }, 
    };  
}); 

HTML khai:

<div my-directive class="one" callme="functionDefinedInScope"></div> 

Trong phạm vi điều khiển của bạn:

$scope.functionDefinedInScope = function(el) { 
    el.css({left: '+=100'}); 
} 

Đọc thêm về điều này tại đây: http://docs.angularjs.org/guide/directive (Phần "D irective Definition Object ")

Answer 3

bạn có thể sử dụng id thay vì lớp

<div my-directive id="one"></div> 
<div my-directive id="two"></div> 

và trong điều khiển của bạn

controller: function(scope, el, attrs) { 
    scope.moveElement = function() { 
     el.css({left: '+=100'}); 
    } 
} 

và sau đó thay vì phát sóng,

angular.element('#one').scope().moveElement()