javascript - 如何使 Angular Directive(指令)仅在一个 Controller 中工作

Question

我有很多 Controller ，我有一个指令。现在我希望这个指令只在一个特定的 Controller 中工作。

Plunker 链接:http://plnkr.co/edit/onDmKl?p=preview

JS:

var app = angular.module('plunker', []);

app.controller('MainCtrlA', function($scope) {

});
app.controller('MainCtrlB', function($scope) {

});

app.directive('ngElevateZoom', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      element.attr('data-zoom-image', attrs.zoomImage);
      $(element).elevateZoom();
    }
  };
});

$(document).ready(function() {
  $('#native').elevateZoom();
});

HTML:

<div ng-controller="MainCtrlA">
    <img ng-elevate-zoom ng-src="http://s27.postimg.org/xyoknslhf/blue_bird_wallpaper_small.jpg" zoom-image="http://s27.postimg.org/v5h4f601v/blue_bird_wallpaper.jpg" />
  </div>

  <div ng-controller="MainCtrlB">
    <img ng-elevate-zoom ng-src="http://s27.postimg.org/xyoknslhf/blue_bird_wallpaper_small.jpg" zoom-image="http://s27.postimg.org/v5h4f601v/blue_bird_wallpaper.jpg" />
  </div>

现在我希望 ngElevateZoom 指令仅在 MainCtrlA 中工作。

我不是 Angular 方面的专家，所以对我放轻松 ;)

Answer 1

构建 AngularJS 应用程序的一种好方法是模块化每个组件，这意味着您可以创建 Controller 、指令、过滤器等. 并将它们包装到一个模块中:

var myApp = angular.module('myApp', ['moduleA', 'moduleB']);

angular.module('moduleA', [])
  .directive('myDirectiveA', function() {})
  .controller('MyCtrlA', function($scope) {});

angular.module('moduleB', [])
  .directive('myDirectiveB', function() {})
  .controller('MyCtrlB', function($scope) {});