AngularJS 缺少必需的控制器

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 缺少必需的控制器

AngularJS Missing required controller

angularjs

angularjs-directive