如何从Controller Code中获取AngularJS指令名称？

Question

我有两个非常相似的AngularJS指令，所以我想使用一个控制器来处理它们。 为了区分2个指令之间的Controller代码，我希望能够知道当前使用的是哪个指令。我有办法告诉你吗？它听起来像是AngularJS中的一个简单函数，但到目前为止我在文档中找不到它。

<div dirA ></div>
<div dirB'></div>

app.directive('dirA', function() {
    return {
        restrict: 'A',
        replace: true,
        controller: 'CommonCtrl',
    };
});

app.directive('dirB', function() {
    return {
        restrict: 'A',
        replace: true,
        controller: 'CommonCtrl',
    };
});

app.controller('CommonCtrl',
    function CommonCtrl($scope, $location, $log, $attrs) {
      // how do i know which directive is using me now???
    }
);

Answer 1

当然你可以在指令的控制器上设置一个属性，如果指定的话，它会自动注入你的链接函数：

Here's a plunk for it

var app = angular.module('myApp', []);

app.directive('dirA', function (){
  return {
    controller: 'CommonCtrl',
    scope: true,
    template: '<button ng-click="test()">Test A</button>',
    link: function(scope, elem, attrs, ctrl) {
      ctrl.directiveName = 'dirA';
    }
  };
});

app.directive('dirB', function (){
  return {
    controller: 'CommonCtrl',
    scope: true,
    template: '<button ng-click="test()">Test B</button>',
    link: function(scope, elem, attrs, ctrl) {
      ctrl.directiveName = 'dirB';
    }
  };
});

app.controller('CommonCtrl', function ($scope, $window){
  var ctrl = this;

  $scope.foo = 'bar';

  $scope.test = function (){
    $window.alert('Directive name is: ' + ctrl.directiveName);
  };
});

但这可能不是一个好主意。

耦合警告！

这将导致您的应用中的耦合稍微紧密。因为现在你的Controller之间存在一个依赖关系，它应该封装操作你的$ scope（模型）的逻辑和你的View，因为现在你的控制器至少引用了一个指令名或指令特定的数据。从长远来看，这会损害可测试性和可读性。

建议：使用继承

如果你的功能与不同的指令略有不同，那么创建一个CommonCtrl可能更好，然后创建一个DirACtrl和DirBCtrl，原型继承自CommonCtrl ...如果这是有道理的。