isolateScope() returns undefined when using templateUrl
angularjs, angularjs-directive, karma-runner, unit-testing
Solution
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();
});
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.
Problem
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> ``` And the code behind it: ``` 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'); }; } }; }); ``` And here's my unittest: ``` 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(); }); }); ``` 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? Thanks in advance.