[英]Angular with Jasmine error: Controller required by directive can't be found
I have an application which has two directives, where one directive requires the other. 我有一个具有两个指令的应用程序,其中一个指令需要另一个。 I have replicated it to mirror the base of the application:
我已将其复制以反映应用程序的基础:
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;
};
}
}
});
I am trying to write a test using Jasmine to test different functions in directiveA: 我正在尝试使用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);
});
});
When I run this, I get the error: 运行此命令时,出现错误:
Controller 'directiveB', required by directive 'directiveA', can't be found!
I have setup A Plnkr which reproduces the error. 我已经设置了一个Plnkr来重现该错误。 I cannot seem to figure out how I can inject one directive, or rather its controller, into the other directive.
我似乎无法弄清楚如何将一个指令或它的控制器注入另一个指令。 Any help is greatly appreciate.
任何帮助,我们将不胜感激。
http://plnkr.co/edit/pKDNkiO1ZHxE6qQKXXF5?p=preview http://plnkr.co/edit/pKDNkiO1ZHxE6qQKXXF5?p=preview
Here's an updated jasmine beforeEach
code (or plunker ): 这是更新的茉莉花
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();
}));
And updated directiveB code: 并更新了directiveB代码:
directive('directiveB', function() {
return {
restrict: 'EA',
//template: '<div><h1>DirectiveB</h1></div>',
scope: {
value: "@"
},
controller: function($scope) {
this.exampleFunction = function() {
return true;
};
}
}
});
Takeaway: 带走:
elem.children(':first').isolateScope()
elem.children(':first').isolateScope()
获取其范围 this
to create controller methods instead of $scope
this
来创建控制器方法而不是$scope
UPD: UPD:
You can use transclude if your parent directive needs to have a template. 如果您的父指令需要模板,则可以使用transclude。 Here is a pluker .
这是一个推杆 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.