在AngularJS中,为什么指令需要自己?

时间:2014-04-22 17:52:59

标签: javascript angularjs angular-ui angular-ui-bootstrap

我试图从angular-ui代码中学习。我看到btnRadio指令需要自己。我理解指令可以require控制器,然后在link函数的第四个参数中作为数组访问它们。我不明白为什么指令会要求自己。

.directive('btnRadio', function () {
  return {
    require: ['btnRadio', 'ngModel'],
    controller: 'ButtonsController',
    link: function (scope, element, attrs, ctrls) {
      var buttonsCtrl = ctrls[0], ngModelCtrl = ctrls[1];
      ...

https://github.com/angular-ui/bootstrap/blob/master/src/buttons/buttons.js#L15

这只需要自己的控制器,对吗?这是什么目的,或者解决了什么问题?

2 个答案:

答案 0 :(得分:3)

我相信它是在链接功能中检索控制器。

答案 1 :(得分:2)

该应用程序的结构对我来说非常奇怪。他们似乎可以更好地定义它:

angular.module('ui.bootstrap')
  .controller('ButtonsController', function($scope, buttonConfig) {
    $scope.activeClass = buttonConfig.activeClass || 'active';
    $scope.toggleEvent = buttonConfig.toggleEvent || 'click';
  })
  .directive('btnRadio', function() {
    return {
      require: 'ngModel',
      controller: 'ButtonsController',
      link: function(scope, elem, attrs, ngModel) {
        // These are now available here in the link function
        scope.activeClass;
        scope.toggleEvent;
        // ... other functionality
      }
    }
  });

然而,@ Jeff是对的。他们这样做是为了让他们可以访问ButtonsController。如果您在代码中向下看,他们只是使用它来访问activeClasstoggleEvent属性。

我能够按照当前的方式进行思考的唯一原因是避免在指令上生成隔离范围。隔离范围可能会干扰此库外部的代码。