使用 templateUrl 时，isolateScope() 返回 undefined [英] isolateScope() returns undefined when using templateUrl

问题描述

我有一个要进行单元测试的指令，但我遇到了无法访问我的隔离范围的问题.这是指令:

I have a directive that I want to unittest, but I'm running into the issue that I can't access my isolated scope. Here's the directive:

<my-directive></my-directive>

及其背后的代码:

angular.module('demoApp.directives').directive('myDirective', function($log) {
    return {
        restrict: 'E',
        templateUrl: 'views/directives/my-directive.html',
        scope: {},
        link: function($scope, iElement, iAttrs) {
            $scope.save = function() {
                $log.log('Save data');
            };

        }

    };
});

这是我的单元测试:

describe('Directive: myDirective', function() {
    var $compile, $scope, $log;

    beforeEach(function() {
        // Load template using a Karma preprocessor (http://tylerhenkel.com/how-to-test-directives-that-use-templateurl/)
        module('views/directives/my-directive.html');
        module('demoApp.directives');
        inject(function(_$compile_, _$rootScope_, _$log_) {
            $compile = _$compile_;
            $scope = _$rootScope_.$new();
            $log = _$log_;
            spyOn($log, 'log');
        });
    });

    it('should work', function() {
        var el = $compile('<my-directive></my-directive>')($scope);
        console.log('Isolated scope:', el.isolateScope());
        el.isolateScope().save();
        expect($log.log).toHaveBeenCalled();
    });
});

但是当我打印出隔离范围时，结果是 undefined.不过，真正让我感到困惑的是，如果我在指令中只使用 template 而不是 templateUrl，那么一切正常: isolateScope() 有一个完全scope 对象作为它的返回值，一切都很好.然而，不知何故，当使用 templateUrl 时它会中断.这是 ng-mocks 或 Karma 预处理器中的错误吗?

But when I print out the isolated scope, it results in undefined. What really confuses me though, if instead of the templateUrl I simply use template in my directive, then everything works: isolateScope() has a completely scope object as its return value and everything is great. Yet, somehow, when using templateUrl it breaks. Is this a bug in ng-mocks or in the Karma preprocessor?

提前致谢.

推荐答案

我遇到了同样的问题.似乎在结合使用 templateUrl 调用 $compile(element)($scope) 时，不会自动启动摘要循环.因此，您需要手动将其关闭:

I had the same problem. It seems that when calling $compile(element)($scope) in conjunction with using a templateUrl, the digest cycle isn't automatically started. So, you need to set it off manually:

it('should work', function() {
    var el = $compile('<my-directive></my-directive>')($scope);
    $scope.$digest();    // Ensure changes are propagated
    console.log('Isolated scope:', el.isolateScope());
    el.isolateScope().save();
    expect($log.log).toHaveBeenCalled();
});

我不知道为什么 $compile 函数不为你做这件事，但它一定与 templateUrl 的工作方式有些特殊，就像你一样如果您使用内联模板，则不需要调用 $scope.$digest().

I'm not sure why the $compile function doesn't do this for you, but it must be some idiosyncracy with the way that templateUrl works, as you don't need to make the call to $scope.$digest() if you use an inline template.

这篇关于使用 templateUrl 时，isolateScope() 返回 undefined的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！