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

【问题标题】：Testing an Angular directive with isolate scope and parent controller使用隔离范围和父控制器测试 Angular 指令
【发布时间】：2015-09-10 02:16:43
【问题描述】：

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

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

我刚刚拥有的范围似乎是$rootScope 的一个空子范围。我试过使用element.isolateScope()，但这似乎给了我父指令的范围。

我可能编译错了，有人可以帮忙吗？

parent-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;
            };
        }
    };
});

directive-to-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();
}));

【问题讨论】：

都是代码吗？它看起来不像'链接功能肯定正在执行'。编译期间会发生的第一件事是错误，因为缺少所需的 sortHead。
不，这就是所有代码，我在测试中添加了断点，链接函数运行了。我还认为没有 sortHead 会失败。我也尝试过在元素中使用 sortHead 指令的不同方法，但它完全相同，范围似乎是空的

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

【解决方案1】：

目前的测试似乎不可行。

这里是 a plunker 固定规格

beforeEach(module('app'));

beforeEach(inject(function ($rootScope, $compile, $templateCache, sortHeaderDirective) {
  scope = $rootScope.$new();
  $templateCache.put(sortHeaderDirective[0].templateUrl, '');

  element = angular.element("<th sort-header title='Name' sort='name'></th>");
  element.data('$sortHeadController', {});

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

it("should do something", inject(function () {
    expect(element.isolateScope().title).toEqual('Name');
}));

【讨论】：