单元测试中的指令隔离范围答案

【问题标题】：directive isolated scope in unittest单元测试中的指令隔离范围
【发布时间】：2014-05-03 15:07:37
【问题描述】：

我有一个相当复杂的指令，下面是一个简化的形式。

http://plnkr.co/edit/QV2QyZlknGyN3zTiv3w4?p=preview

如果我删除兄弟元素，它会起作用：http://plnkr.co/edit/rMeCyKiMm4jPqh2NFKPf?p=preview

当我的模板具有注释中的其他同级 html 标记时，

console.log(el.isolateScope()) --> undefined
console.log(el.children().scope()) --> isolated scope

我期待通过 el.isolateScope() 获得隔离指令范围。为什么它是未定义的？如果还有其他元素，为什么行为会有所不同（仍然，该指令不是其他元素的子元素，而是兄弟）

js:

var app = angular.module('plunker', []);

app.directive('myTest', function () {
    return {
        restrict: 'E',
        scope: {},
        replace: true,
        template: '<div><div>far boo</div></div>',
        link: function (scope, element, attrs, controller) {
            scope.msg = 'bar';        
        },
        controller: function($scope){
            $scope.msg = 'foo';
        }
    };
});

规格：

describe('myTest directive:', function () {

    var scope, compile, validHTML;

    //validHTML = '<my-test></my-test>';
    validHTML = '<script type="text/ng-template" id="directive/propTmplAdd.html"><div></div></script><my-test></my-test>';

    beforeEach(module('plunker'));

    beforeEach(inject(function($compile, $rootScope){
        scope = $rootScope.$new();
        compile = $compile;
    }));

    function create() {
        var elem, compiledElem;
        elem = angular.element(validHTML);
        compiledElem = compile(elem)(scope);
        scope.$digest();

        return compiledElem;    
    }

    it('should have a scope on root element', function () {  
        var el = create();

        console.log('isolateScope', el.isolateScope())
        console.log('ch isolateScope', el.children().scope())
        console.log('ctrl', el.controller('myTest'))


        expect(el.isolateScope()).toBeDefined();
        expect(el.isolateScope().$id).not.toEqual(scope.$id);
    });

    it('should have a populated scope', function(){
        var el = create();
        expect(el.isolateScope().msg).toBeDefined();
        expect(el.isolateScope().msg).toEqual('bar');   
    });
});

【问题讨论】：

标签： javascript angularjs unit-testing

【解决方案1】：

代码中create() 函数返回的jqLite 包装对象将包含两个元素。

el[0] 将是：

<script type="text/ng-template" id="directive/propTmplAdd.html" class="ng-scope"><div></div></script>

el[1] 将是：

<div class="ng-scope ng-isolate-scope"><div>far boo</div></div>

当调用el.isolateScope() 时，它将在第一个没有元素的元素上调用。

您要么必须以不同方式编译元素，要么在 jqLite 中重新包装正确的元素。

例如：

it('should have a populated scope', function() {

  var elements = create();
  var element = angular.element(elements[1]);

  expect(element.isolateScope().msg).toBeDefined();
  expect(element.isolateScope().msg).toEqual('bar');
});

【讨论】：