[英]How to mock angular directive that has require field
我最近遇到了這個問題:我有: directive-a
, directive-b
指令b具有一個`require:'^ directive-a'字段,這使得無法進行單元測試。
我曾經在單元測試中以這種方式編譯指令:
element = $compile('<directive-a></directive-a>')($scope);
然后我可以使用element.isolateScope()
獲得隔離范圍
但是現在因為b對a有依賴關系,所以我必須這樣做:
element = $compile('<directive-a> <directive-b></directive-b> </directive-a>')($scope);
在這種情況下, element.isolateScope()
返回指令a的范圍而不是指令b。
如何獲得directive-b
的范圍?
演示:
指令A:
(function(){
'use strict';
function directiveA(){
return {
restrict: 'E',
templateUrl: '/main/templates/directiveA.html',
transclude: true,
scope: {
attr1: '='
},
controller: function($scope){
//code...
},
link: function($scope, element, attrs, ctrl, transclude){
injectContentIntoTemplate();
function injectContentIntoTemplate(){
transclude(function (clone) {
element.find('#specificElement').append(clone);
});
}
}
};
}
angular
.module('myModule')
.directive('directiveA', directiveA);
}());
指令B:
(function(){
'use strict';
function directiveB(){
return {
restrict: 'E',
templateUrl: '/main/templates/directiveA.html',
transclude: true,
replace: true,
scope: {
attr1: '@'
},
require: '^directiveA',
link: function ($scope, element, attrs, ctrl) {
$scope.customVariable = 'something';
}
};
}
angular
.module('myModule')
.directive('directiveB', directiveB);
}());
答案較晚,未經測試。
let element = $compile('<directive-a> <directive-b></directive-b> </directive-a>')($scope);
let elementB = element.find('directive-b');
let BsScope = elementB.isolateScope();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.