簡體   English   中英

如何模擬需要字段的角度指令

[英]How to mock angular directive that has require field

我最近遇到了這個問題:我有: directive-adirective-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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM