Question

我在尝试使用一种不寻常的方法来获取页面内容的模板时遇到了一个问题。我已经抽象了它，但足以说代码工作正常但是测试却引发了一些问题。我在下面列出了我的指令：

指令：

return {
    restrict: 'A',
    scope: {
        page: '=pageCode',
    },
    link: function (scope, element) {
        $http.get('templates/' + scope.page + '.html', {cache: $templateCache})
            .success(function(html) {
                element.replaceWith($compile(html)(scope));
            });
    }
};

基本上，当使用page-code属性调用此指令时，它会抓取它并为该页面内容提取特定的部分内容。我已经尝试嘲笑$scope来包含代码，但这不起作用所以我现在正在硬编码data-page-code="404"。测试如下：

指令测试：

it('should compile and pass through the scope', function() {
    mockDirectiveHtml= '<div data-page-content data-page-code="404"></div>';
    mockTemplateHtml= '<h1>Hi</h1>';
    $httpBackend.expectGET('templates/404.html').respond(mockTemplateHtml);

    pageContentHtml= $compile(mockDirectiveHtml)($scope);
    $scope.$digest();
    $httpBackend.flush();

    expect(pageContentHtml.html()).toEqual('<h1>Hi</h1>');
});

然而，当这个运行时，控制台告诉我它正试图点击GET('templates/undefined.html')。现在我不确定我是否有正确的顺序，或者甚至是解决方案，但过去有没有人遇到这样的事情？我假设在将属性传递给它之前该指令正在运行，因此当抓取templates/' + 'scope.code'时该值未定义。

单元测试：动态模板指令

0 个答案: