Как сделать угловую директиву работать только в одном контроллере

Question

У меня есть много контроллеров, и у меня есть директива. и теперь я хочу, чтобы эта директива работала только в одном конкретном контроллере.

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.

им не эксперт в угловом, так легко идти на меня;)

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