使用 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屋!