Question

我有以下指令：

offerListSorters.directive('offersSorter', ['myState', '$templateCache', function (myState, $templateCache){
  return {
    scope: {},
    controller: function($scope, $element, $attrs, $transclude) {
      [...]
    },
    restrict: 'E',
    //templateUrl: 'partials/offersSorterDirective.html',
    template: $templateCache.get('partials/offersSorterDirective.html'),
    replace: true,
    transclude: true
  };
}]);

我使用Karma + Jasmine测试此代码并且它可以工作。但是现在如果我切换到templateUrl（目前被注释掉），它就不起作用了。我创建了simple Plunker来显示此问题。当你比较sorter和bsorter指令时，当我使用templateUrl而不是template时，看起来对编译元素的isolateScope（）调用会中断。有什么想法吗？

Answer 1

这是最奇怪的事情，我认为这实际上是一个错误，如果你使用的是templateUrl，你就不会得到一个孤立的范围。模板本身已正确加载，但从未加载范围。我updated the plnkr进行了一些额外的日志记录，检查出控制台，你会明白我的意思，bsorter没有得到ng-isolate-scope类，并且范围是未定义的。

修改

我在调用编译函数时进一步更新了plnkr以记录控制台消息。这几乎是我的javascript / angularJS知识的限制，但是bsorter编译函数被记录为在应该返回范围之后被称为，这与在之前被称为的排序器编译函数不同。 / em>的

Answer 2

你应该在it（）函数中调用isolateScope（），而不是在beforeEach（）中调用。

describe("Testing...", function(){
    var element, isoScope;

    beforeEach(function(){
        module("myApp");

        inject(function($rootScope, $compile){
            var scope = $rootScope.$new();
            element = $compile(angular.element("<sorter></sorter>"))(scope);
            // isoScope = element.isolateScope();  <- Move from here
            $rootScope.$digest();
        });
    });

    it("something...", function(){
        isoScope = element.isolateScope();  // <- to here
        expect(isoScope.someProp).toBe("someValue");
    });
});

Answer 3

你必须在通过$ compile创建指令后调用$ rootScope。$ digest（），然后它应该工作（现在你在你的变量parentScope上调用$ digest（）是一个新的使用$ rootScope创建的范围。$ new（））

AngularJS templateUrl vs template - 隔离范围

3 个答案: