Question

我想创建具有以下结构的两个指令：

<div ng-app="myApp">
    <div ui-foo="test">
        <div ui-bar="test2"></div>
    </div>
</div>

第一个指令是uiFoo，第二个指令是uiBar。

要定义这些指令，我已经设置了以下模块定义：

angular.module('ui', []).directive('uiFoo', 
    function() {
      return {
        restrict: 'A',
        link: function($scope, element, attrs) {
            $scope.message = function() {
                alert(1);
            };
        }
      };
    }
  ).directive('uiBar',
    function() {
      return {
        restrict: 'A',
        require: '^uiFoo',
        scope: true,
        link: function($scope, element, attrs, uiBarController) {
          uiBarController.message();
        }
      };
    }
  );

angular.module('myApp', ['ui']);

我遇到的问题称为error/$compile/ctreq（Controller 'uiFoo', required by directive 'uiBar', can't be found!），可在此处找到相关文档（https://docs.angularjs.org/error/$compile/ctreq?p0=uiFoo&p1=uiBar）。我知道，有点黯淡。

似乎没有解决我的问题。

我为此创建了一个JSFiddle，您可以在这里找到http://jsfiddle.net/A8Vgk/1187/

谢谢！

Answer 1

如错误所示，您在uiFoo指令上错过了控制器。

当您使用require: ^uiFoo时，它告诉Angular您希望在名为uiFoo的指令中访问控制器。

您没有在该指令中定义控制器，因此您会收到错误。

只需定义控制器：

angular.module('ui', []).directive('uiFoo', 
    function() {
      return {
        restrict: 'A',
        link: function($scope, element, attrs) {
            $scope.message = function() {
                alert(1);
            };
        },
          controller: function($scope) {
              this.message = function () {
                  alert("works!");
              }
          }
      };
    }
  )

Working Fiddle

AngularJS缺少所需的控制器

1 个答案: