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

Question

i have many controllers and i have a directive. and now i want this directive to work in only one particular controller.

Plunker 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>

now i want that ngElevateZoom directive to work only in MainCtrlA.

im no expert in angular, so go easy on me ;)

Answer 1

A nice way to structure your AngularJS application is to modularize every component, that means you create your controllers , directives , filters , etc. and wrap them into a 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) {});