如何使 angular 指令仅在一个控制器中工作

Question

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

笨蛋 Link：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 应用程序的一种好方法是模块化每个组件，这意味着您可以创建 控制器 、指令 , filters, 等等，并将它们包装成 module:

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

如何使 angular 指令仅在一个控制器中工作

How to make an angular directive to work only in one controller

javascript

controller

directive

angularjs