如何使角度指令仅在一个控制器中工作答案

【问题标题】：How to make an angular directive to work only in one controller如何使角度指令仅在一个控制器中工作
【发布时间】：2016-05-02 01:36:34
【问题描述】：

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

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 中工作。

我不是角度方面的专家，所以请放轻松；）

【问题讨论】：

为什么不干脆不要在其他控制器中使用它？
指令旨在被所有控制器重用，因此您可以通过破解它来限制其使用，但这会破坏使用它的真正好处

标签： javascript angularjs controller directive

【解决方案1】：

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

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) {});

【讨论】：