当使用templateUrl时，isolateScope()返回未定义 [英] 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而不是template，那么一切都会起作用: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的工作方式必须具有某种特殊性，因为您无需调用如果您使用嵌入式模板.

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()返回未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！