使用隔离范围和父控制器测试Angular指令

时间:2015-09-10 02:16:44

标签: angularjs unit-testing compilation angularjs-scope directive

我有一个指令,它创建一个隔离范围,并通过require选项有一个父指令控制器。在link函数中,我向范围添加了一些方法。

当我尝试在我的测试中编译指令时,我似乎无法访问我在链接函数中添加的方法,即使链接函数肯定正在执行。

我刚才的范围似乎是$rootScope的空子范围。我尝试过使用element.isolateScope(),但这似乎只是给了我父指令的范围。

我可能编译错误,有人可以帮忙吗?

父 - directive.js

angular.module("app").directive("sortHead", function() {
    return {
        restrict: "A",
        controller: function ($scope) {
            $scope.sortField = undefined;
            $scope.reverse = false;

            this.setSortField = function(value) {
                $scope.sortField = value;
            };
            this.setReverse = function(value) {
                $scope.reverse = value;
            };
            this.getSortField = function(value) {
                return $scope.sortField;
            };
            this.getReverse = function(value) {
                return $scope.reverse;
            };
        }
    };
});

指令到test.js

angular.module("app").directive("sortHeader", function() {
    return {
        restrict: "A",
        templateUrl: "templates/sortHeader.html",
        scope: {
            title: "@",
            sort: "@"
        },
        require: "^sortHead",
        link: function(scope, element, attrs, controller) {

            scope.sortBy = function(name) {
                if (controller.getSortField() === name) {
                    controller.setReverse(!controller.getReverse());
                } else {
                    controller.setSortField(name);
                    controller.setReverse(false);
                }
            };

            scope.getSortField = function() {
                return controller.getSortField();
            };
            scope.getReverse = function() {
                return controller.getReverse();
            };
        }
    };
});

test.js

beforeEach(inject(function ($rootScope, $compile) {
    scope = $rootScope.$new();

    element = angular.element("<th sort-header title='Name' sort='name'></th>");

    $compile(element)(scope);
    scope.$digest();
}));

0 个答案:

没有答案