Question

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

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>

现在我希望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) {});

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

1 个答案: