Recently, I encountered a challenge that involves two directives: directive-a, directive-b.
The issue arises because directive-b has a `require: '^directive-a' field, which complicates unit testing.
In my unit tests, I used to compile the directive like this:
element = $compile('<directive-a></directive-a>')($scope);
This allowed me to retrieve the isolated scope using element.isolateScope().
However, due to the dependency of b on a, I now have to do it differently:
element = $compile('<directive-a> <directive-b></directive-b> </directive-a>')($scope);
Unfortunately, in this scenario, element.isolateScope() returns directive-a's scope instead of directive-b's.
I'm wondering how I can access the scope of directive-b?
Demo:
Directive 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);
}());
Directive 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);
}());