如何在Jasmine Test中访问指令的范围

Question

I cant get the scope of my directive (another option is that I get the scope but my function is not there). I am using Jasmine over Karma.

My directive:

angular.module('taskApp').directive('nkAlertDir', ['$http', function ($http) {
    return {
        template: "<span>{{msg}}</span>",
        replace: true,
        link: function (scope, elem, attrs) {
            scope.values = {
                canvas: canvasSize,
                radius: size,
                center: canvasSize / 2
            };

            $http.get('someUrl')
                .suncces(function (data) {
                    scope.msg = data;
                })
                .error(function (err) {
                    //there is always be error because this url does nor exist
                    //but this is not the point in this exercise
                });

            scope.returnNumbers = function () {
                return [2, 2];
            }
        }
    }
}]);

My test:

describe('Unit: Directives', function () {

    var element;
    var scope;

    beforeEach(module('taskApp'));

    beforeEach(inject(function ($compile, $rootScope) {

        scope = $rootScope;
        element = angular.element('<div nk-alert-dir></div>');

        scope.size = 100;
        $compile(element)(scope);
        scope.$digest();
    }));

    it('should bind an alert message of "task added!"', function () {

        var dirScope = element.isolateScope();
        console.log(dirScope);
    });
});

Somehow I always get the dirScope is undefined I have tried this:

• replaced the digest() in $apply()
• replaced the $rootScope in $rootScope.$new()

Answer 1

You don't have an isolated scope in your directive, so element.isolateScope() is going to return undefined.

Try just accessing the scope: element.scope()

If you want an isolate scope on your directive, then you have to set the scope property of your directive definition object to a JS object and add the properties there. Then you'd be able to use element.isolateScope to get access to the isolate scope.

return {
        template: "<span>{{msg}}</span>",
        replace: true,
        scope : {},   // Any properties you want to pass in to the directive on scope would get defined here
        link: function (scope, elem, attrs) {
            scope.values = {
                canvas: canvasSize,
                radius: size,
                center: canvasSize / 2
            };

            $http.get('someUrl')
                .suncces(function (data) {
                    scope.msg = data;
                })
                .error(function (err) {
                    //there is always be error because this url does nor exist
                    //but this is not the point in this exercise
                });

            scope.returnNumbers = function () {
                return [2, 2];
            }
        }
    }