2

我有一个相当复杂的 Angular 指令，称为hy-plugin-window，我在一个ng-repeat块中使用它（完整的指令代码在这里）：

<div ng-repeat="pluginD in pluginsDisplayed">
    <div hy-plugin-window content="pluginD" remove="remove"></div>
</div>

该指令使用一个隔离范围，它与父级成员双向链接content：

return {
        restrict: 'A',
        replace: true,
        link: linker,
        scope: {
            content:'=',
        }
    };

这意味着，当它被创建时，列表中的每个指令都可以访问其唯一的内容（它是 object 的单个成员pluginsDisplayed）并执行以下操作：

scope.statusMessage = 'Loading ' + scope.content.name + '...';

一切正常，除了我不知道如何用 Karma 测试它。通过这样一个相当常见的测试，我希望手动设置指令内的范围：

'use strict';

describe('Directive: hyPluginWindow', function () {

    beforeEach(module('hyacinthHostApp'));

    var element, $compile, scope;

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


  it('should do something', inject(function () {

      scope.content = {
          name: "testElement",
          id: "testElement000",
          uiType: "canvas"
      };

      element = angular.element('<div hy-plugin-window></div>');
      element = $compile(element)(scope);

      //expect(...);
  }));
});

但它悲惨地失败了：

TypeError: Cannot read property 'name' of undefined

我的指令第一次尝试访问它的scope.content.name.

考虑到我是一个测试完整的新手，我错过了什么？

4

1 回答 1

3

短篇小说：将编译的元素更改为<div hy-plugin-window content="content"></div>，我认为它应该可以工作。

该指令具有 ISOLATE 范围，这意味着它在原型上不会从“常规”范围继承。

在您的测试中，您正在定义content常规范围，但指令本身是封装的 - 它具有隔离范围，因此看不到content在常规范围上定义的属性。

您需要通过组件的显式接口（即content属性）进行通信。

于 2013-06-19T03:50:47.487 回答