角度与茉莉花错误：指令所需的控制器找不到

Question

我有一个具有两个指令的应用程序，其中一个指令需要另一个。 我已将其复制以反映应用程序的基础：

var module = angular.module('testApp', ['testApp.directiveA', 'testApp.directiveB']);

// Here goes your modules definition
module.controller('AppCtrl', function ($scope, $log) {
});

angular.module('testApp.directiveA', ['testApp.directiveB'])

.directive('directiveA', function () {
    return {
        restrict: 'EA',
    require: '^directiveB',
        template: '<div><h1>DirectiveA</h1></div>',
    scope: {
      value: "@"
    },
        link: function (scope, element, attrs, directiveBCtrl) {
            scope.testFunction = function() {
                return directiveBCtrl.exampleFunction();
            };

            scope.value = scope.testFunction();
        }
    }
});

angular.module('testApp.directiveB', [])

.directive('directiveB', function () {
    return {
        restrict: 'EA',
        template: '<div><h1>DirectiveB</h1></div>',
    scope: {
      value: "@"
    },
        controller: function ($scope) {
            $scope.exampleFunction = function() {
                return true;
            };
        }
    }
});

我正在尝试使用Jasmine编写测试以测试指令A中的不同功能：

describe('Test directive with require', function () {

    var $scope, elem, scope;

    beforeEach(angular.mock.module("testApp.directiveA", "testApp.directiveB"));

    beforeEach(inject(function ($rootScope, $compile) {

        elem = angular.element('<directive-a value="aValue"></directive-a>');

        $scope = $rootScope.$new();

        $compile(elem)($scope);

        $scope.$digest();

        scope = elem.isolateScope();

    }));

    it('Should test a function on directiveA', function() {

        var result = scope.testFunction();
        expect(result).toEqual(true);
    });
});

运行此命令时，出现错误：

Controller 'directiveB', required by directive 'directiveA', can't be found!

我已经设置了一个Plnkr来重现该错误。 我似乎无法弄清楚如何将一个指令或它的控制器注入另一个指令。 任何帮助，我们将不胜感激。

http://plnkr.co/edit/pKDNkiO1ZHxE6qQKXXF5?p=preview

Answer 1

这是更新的茉莉花beforeEach代码（或代码 ）：

beforeEach(inject(function($rootScope, $compile) {
    elem = angular.element('<directive-b><directive-a value="aValue"></directive-a></directive-b>');
    $scope = $rootScope.$new();
    $compile(elem)($scope);
    $scope.$digest();
    scope = elem.children(':first').isolateScope();
}));

并更新了directiveB代码：

directive('directiveB', function() {
    return {
        restrict: 'EA',
        //template: '<div><h1>DirectiveB</h1></div>',
        scope: {
            value: "@"
        },
        controller: function($scope) {
            this.exampleFunction = function() {
                return true;
            };
        }
    }
});

带走：

1. 将您的指令包装为必需的指令，并使用elem.children(':first').isolateScope()获取其范围
2. 必需的指令不应具有模板，否则它将覆盖您的指令indside
3. 使用this来创建控制器方法而不是$scope

UPD：

如果您的父指令需要模板，则可以使用transclude。 这是一个推杆 。