AngularJS - 预加载的模板不使用指令

时间:2014-02-28 23:18:22

标签: javascript angularjs angularjs-directive angular-template

我希望将所有模板放在脚本标记中,并在我的指令中使用它们,而无需使用ajax请求。

这是我的模板:

<script id="article_row.html" type="text/ng-template">
    <tr>
        <td class="article-id">[[ article.id ]]</td>
        <td>[[ article.title ]]</td>
        <td>[[ article.user_id ]]</td>
        <td>[[ article.created_at ]]</td>
        <td>
            <article-restore id="article.id"></article-restore>
        </td>
    </tr>
</script>

这是我的指示:

app.directive("articleLine", [function(){

    return {

        return: 'E',
        scope: {
            article : "=data"
        },
        templateUrl: "article_row.html"

    };

}]);

加载时,我在控制台中收到此错误:

Error: Failed to load template: article_row.html

我在控制台中看到浏览器正试图从http://localhost/articles/article_row.html获取它 相反在页面中寻找它,我做错了吗?

谢谢!

1 个答案:

答案 0 :(得分:1)

<article-line data="myData"></article-line>

当您在上面放置articelLine指令时,系统会在您添加article_row.html ng-template之前编译此行并获取错误。

所以,你必须把ng-template放在它前面。