角度與茉莉花錯誤：指令所需的控制器找不到

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。 這是一個推桿 。