javascript - Failed to load template的原因是什么

问题描述

问 题

我写了个组件，但是在引用到网页的时候出现了[$compile:tpload] Failed to load template这个问题，具体原因会有哪些呀？有什么比较好的解决方法的？

<div class="media">
    <div class="media-left">
        <a href="#">
            <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNTQ1MTA2MWI0MSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1NDUxMDYxYjQxIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxNC41IiB5PSIzNi41Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered="true" style="width: 64px; height: 64px;">
        </a>
    </div>
    <div class="media-body">
        <div ng-transclude></div>
        <h4>111111</h4>
    </div>
</div>

这是组件模板

(function () {
    angular.module('ui.component.worksComment',[])
        .directive('uiComponentWorksComment',worksComment)
    worksComment.$inject = [];
    function worksComment(){
        return {
            restrict: 'EA',
            transclude: true,
            scope:{
                Comment:"=",
            },
            templateUrl:"components/uiComponents/worksComment/worksComment.tpl.html",
        };
    };
}());

组件的JS文件

<div class="row" style="padding:15px;margin:15px;">
    <div class="media-list">
        <div>1111111</div>
        <ui-component-works-comment></ui-component-works-comment>
    </div>
</div>

页面引用

angular.module('worksDetailContent',[
    'ui.component.worksComment'
])

然后我也在相应的app.js文件里配置过了

解决方案

有可能是你的模板路径写错了，试着在浏览器里直接输入你的模板路径看能否获取。类似这样的http://your_project/components/uiComponents/worksComment/worksComment.tpl.html。
参考链接：
angularjs Error: Failed to load template
Error: $compile:tpload

这篇关于javascript - Failed to load template的原因是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！