24

我有以下指令。

directivesModule.directive('wikis', function() {
var urlRegex = new RegExp('^(https?)://.+$');

return {
    restrict: 'E', 
    templateUrl: 'templates/wiki-list.html',
    scope: {
        wikis: '='
    },
    link: function(scope, element, attrs) {
        scope.newWikiURL = '';

        scope.$watch('wikis', function() {
            if (scope.wikis == undefined || scope.wikis.length === 0) {
                scope.class = 'hide';
            } else {
                scope.class = 'show';
            }
        }, false);

        scope.addWiki = function() {
            if (scope.wikis == undefined) {
                scope.wikis = [];
            }

            var nw = scope.newWikiURL;
            if (nw != undefined && nw.trim() != '' && urlRegex.exec(nw)) { 
                scope.wikis.push(nw);
                scope.newWikiURL = '';
            }
        }

    }
};

});

当我测试它时：

describe('Wikis Directive Test Suite', function() {
    var scope, elem, directive, linkFn, html;

    beforeEach(function() {
        html = '<wikis wikis=''></wikis>';

        inject(function($compile, $rootScope) {
            scope = $rootScope.$new();
            scope.wikis = [];

            elem = angular.element(html);

            $compile(elem)(scope);

            scope.$digest();
        });

    });

    it('add Wiki should add a valid wiki URL to artist', function() {
        var url = 'http://www.foo.com';
        scope.newWikiURL = url;
        scope.addWiki();

        expect(scope.wikis.length).toBe(1);
        expect(scope.wikis[0]).toBe(url);
        expect(scope.newWikiURL).toBe('');
    });
});

我收到一条错误消息，指出 Object 没有 addWiki 方法。我尝试调试了一下，测试过程中没有调用链接函数。我怀疑这就是为什么 addWiki 方法不属于范围的原因。有人知道我为什么会收到这个错误吗？

顺便说一句，在指令的链接函数中添加一些逻辑是否是一种正常的做法，因为它本身就是一个控制器？因为看着代码我知道这就是我在现实中这样做的原因。

4

2 回答 2

40

根据 Angular 1.2.0 文档，获取隔离范围的方法是通过方法isolateScope

  • scope() - 检索当前元素或其父元素的范围。

  • 隔离作用域（） - 如果一个隔离作用域直接附加到当前元素，则检索一个隔离作用域。此 getter 应仅用于包含启动新隔离范围的指令的元素。在此元素上调用 scope() 始终返回原始的非隔离范围。

Angular doc - 部分 jQuery/jqLit​​e Extras

重大变化：jqLit​​e#scope()

于 2013-12-02T21:33:18.770 回答
39

  1. 您需要加载包含指令的模块，否则 angular 不知道什么<wikis>是

  2. 您的指令创建了一个隔离范围，因此一旦编译完成，您需要使用elem.isolateScope()

所以有了这些变化：

describe('Wikis Directive Test Suite', function() {
    var $scope, scope, elem, directive, linkFn, html;

    beforeEach(module('app'));

    beforeEach(function() {
        html = '<wikis></wikis>';

        inject(function($compile, $rootScope, $templateCache) {
            $templateCache.put('templates/wiki-list.html', '<div>wiki template</div>');

            $scope = $rootScope.$new();
            $scope.wikis = [];

            elem = angular.element(html);

            $compile(elem)($scope);

            scope = elem.isolateScope();
            scope.$apply();
        });

    });

    it('add Wiki should add a valid wiki URL to artist', function() {
        var url = 'http://www.foo.com';
        scope.newWikiURL = url;
        scope.addWiki();

        expect(scope.wikis.length).toBe(1);
        expect(scope.wikis[0]).toBe(url);
        expect(scope.newWikiURL).toBe('');
    });
});

http://jsfiddle.net/QGmCF/1/

于 2013-09-10T09:44:37.320 回答