AngularJS-預加載的模板不能與指令一起使用

Question

我想將所有模板放入腳本標簽中，並從我的指令中使用它們，而無需使用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獲取它，而不是在頁面中尋找它，這是我做錯了嗎？

謝謝！

Answer 1

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

當您將articelLine指令放在上方時，在包含article_row.html ng-template並得到錯誤之前，將編譯此行。

因此，必須將ng-template放在前面。