我正在编写两个包含ui-bootstrap的tabset和tab指令的指令。
为了将我的指令的内容传递给包装指令,我在两个指令中都使用了转义。
这很有效,唯一的问题是我没有编写检查它的测试。我的测试使用替换指令作为包装指令的模拟,我在每次测试之前使用$ compileProvider替换它。
测试代码如下所示:
beforeEach(module('myModule', function($compileProvider) {
// Mock the internally used 'tab' which is a third party and should not be tested here
$compileProvider.directive('tab', function() {
// Provide a directive with a high priority and 'terminal' set to true, makes sure that
// the mock directive will get executed, and that the real directive will not
var mock = {
priority: 100,
terminal: true,
restrict: 'EAC',
replace: true,
transclude: true,
template: '<div class="mock" ng-transclude></div>'
};
return mock;
});
}));
beforeEach(function() {
inject(function(_$compile_, _$rootScope_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
});
});
beforeEach(function() {
$scope = $rootScope.$new();
});
afterEach(function() {
$scope.$destroy();
});
it('Places the enclosed html inside the tab body', function() {
element = $compile("<div><my-tab>test paragraph</my-tab></div>")($scope);
$scope.$digest();
console.log("element.html() = ", element.html());
expect(element.text().trim()).toEqual("test paragraph");
});
我的指令的模板看起来像这样:
<div><tab><div ng-transclude></div></tab></div>
指令模块如下所示:
angular.module('myModule', ['ui.bootstrap'])
.directive('myTab', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
templateUrl: 'templates/my-tab.tpl.html',
scope: {
}
};
});
打印到控制台的结果如下:
LOG: 'element.html() = ', '<div class="ng-isolate-scope" id=""><div id="" heading="" class="mock"><ng-transclude></ng-transclude></div></div>'
关于为什么不进行转换的任何想法(同样,它在测试之外工作得很好)?
我已经转移到其他事情和指令,并再次遇到这个问题,但现在它更重要,原因是,我放在父指令中的指令需要父控制器在其链接功能中。
我已经对此进行了更多的研究,结果发现由于某种原因,编译模拟指令并不会创建一个被转换内容的实例。
我之所以知道这一点,是因为我在两个指令(包括模拟和转换的指令)中都有一个打印输出,即编译,预链接,后链接和控制器构造函数,我看到了唯一的打印输出来自模拟指令。
现在,这里有一个非常有趣的部分:我已尝试在模拟指令的链接功能中使用transclude函数来强制&#34;强制&#34;转换指令的汇编,有效! (另一个证明它没有隐含地发生) 你问的问题在哪里?嗯,它仍然无法运作。这次,由于transcluded指令的链接功能失败,因为它没有找到mock指令的控制器。什么?!
以下是代码:
代码
var mod = angular.module('MyModule', []);
mod.directive('parent', function() {
return {
restrict: 'E',
replace: true,
template: '<div class="parent">...</div>',
controller: function() {
this.foo = function() { ... };
}
};
});
mod.directive('child', function() {
return {
restrict: 'E',
require: '^parent',
link: function(scope, element, attrs, parentCtrl) {
parentCtrl.foo();
}
};
});
测试
describe('child directive', function() {
beforeEach(module('MyModule', function($compileProvider) {
$compileProvider.directive('parent', function() {
return {
priority: 100,
terminal: true,
restrict: 'E',
replace: true,
transclude: true,
template: '<div class="mock"><ng-transclude></ng-transclude></div>',
controller: function() {
this.foo = jasmine.createSpy();
},
link: function(scope, element, attrs, ctrls, transcludeFn) {
transcludeFn();
}
};
});
}));
});
此测试失败,并显示错误消息,例如:
错误:[$ compile:ctreq]控制器&#39; parent&#39;,指令要求 &#39;孩子&#39;,无法找到!
任何想法,想法和建议都将受到高度赞赏。
答案 0 :(得分:5)
好的,可能是SO历史上最短的赏金......
问题出在mock指令的terminal: true
和priority: 100
属性上。我的印象(从我在线阅读的关于如何模拟指令的文章),这些属性导致编译器停止编译具有相同名称的指令,并优先考虑首先评估的mock指令。
我显然是错的。查看this和this,很明显:
问题是,这导致所有其他处理停止,包括ng-transclude
指令,其默认优先级为0
。
然而,删除这些属性会导致所有地狱崩溃,因为两个指令都已经注册,等等(我不会给你带来所有血腥细节)。为了能够删除这些属性,这两个指令应该驻留在不同的模块中,并且它们之间不应该存在依赖关系。简而言之,在测试child
指令时,唯一被评估为parent
的指令应该是mock指令。
为了支持现实生活,我向系统引入了三个模块:
child
指令的模块(无依赖关系)parent
指令的模块(无依赖关系)child
和parent
模块的模块,这是您需要在代码中添加作为依赖项的唯一模块这就是它。我希望它可以帮助其他任何人遇到这样的问题。