如何模拟具有 require 字段的 angular 指令

Question

我最近遇到了这个问题：我有：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() returns 指令-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);
}());

Answer 1

迟到的答案，未经测试。

let element = $compile('<directive-a> <directive-b></directive-b> </directive-a>')($scope);
let elementB = element.find('directive-b');
let BsScope = elementB.isolateScope();

如何模拟具有 require 字段的 angular 指令

How to mock angular directive that has require field

javascript

unit-testing

angularjs

angular-directive