-1

假设我有以下两个指令：

angular.module('test').directive('apiDirective', function (){
  return {
    restrict: 'A',
    controller: function () {
      this.awesomeFunction = function () {
        console.log("CHECK ME OUT BEING AWESOME");
      }
    }
  }
});

angular.module('test').directive('consumerDirective', function ($compile) {
  return {
    restrict: 'E',
    require: '?apiDirective',
    transclude: true,
    link: function (scope, element, attrs, controller, transcludeFn) {
      console.log('preLink controller: ', controller);
      transcludeFn(scope, function (tElem, tScope) {
        if (attrs.apiDirective === undefined) {
          element.attr('api-directive', '');
          $compile(element)(scope);
        }
        element.html(tElem);
        $compile(tElem)(tScope);
      });

      scope.consumerFunction = function () {
        console.log('trying to consume the awesome', controller);
        controller.awesomeFunction();
      }
    }
  }
});

以及以下html：

<consumer-directive ng-click="consumerFunction()"/>

当指令加载转换按预期发生时，将控制器设置为我的 apiDirective 控制器。但是在 consumerFunction 中，控制器始终是null. 为什么？我怀疑它与第二次编译有关？

完全删除第二个编译会导致指令无法正常呈现。为什么？

发生了什么，如何在不手动将属性级别控制器内联到指令上的情况下修复它？

plnkr 演示：http ://plnkr.co/edit/Lbh7T9FRg3nS6ERW4HtA

4

1 回答 1

0

如果您想找到某些东西，您需要有一个您正在寻找控制器的指令的实例（只需要返回控制器的实例，而不是函数的工厂）。工作示例：http ://plnkr.co/edit/XP3dV456M0No6nbx2zOW?p=preview

<body>
   <div ng-app="test">
      <consumer-directive api-directive ng-click="consumerFunction()">aaa</consumer-directive>
  </div>

于 2015-03-31T01:02:58.810 回答