javascript - How to mock angular directive that has require field -
i've met problem: have: directive-a
, directive-b
directive-b has `require: '^directive-a' fields makes unit testing impossible.
i used compile directive in way in unit tests:
element = $compile('<directive-a></directive-a>')($scope);
then can isolated scope element.isolatescope()
but because b has dependency on a, had this:
element = $compile('<directive-a> <directive-b></directive-b> </directive-a>')($scope);
and in case element.isolatescope()
returns directive-a's scope instead of directive-b.
how can 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); }());
late answer, , untested.
let element = $compile('<directive-a> <directive-b></directive-b> </directive-a>')($scope); let elementb = element.find('directive-b'); let bsscope = elementb.isolatescope();
Comments
Post a Comment