AngularJS 指令 templateUrl 不更新 [英] AngularJS directive templateUrl doesn't update

问题描述

我对角度指令有疑问.当我编辑通过 templateUrl 引用的文件的内容时，直到我删除缓存才会显示结果.我有以下代码:

指令.js

.directive('appMainsec',['$window', function ($window){var objectMainSec = {限制:'A'，templateUrl: 'partials/app-mainsec.html',控制器:函数(){}，controllerAs: 'MainSectCtrl',链接:函数($scope，element，attr){elemnt.css('height', ($window.innerHeight - ($window.innerHeight * .25)) + 'px');}};返回对象MainSec；}]);

app-mainsec.html

Principal
;

和 index.html

<代码>...<div app-mainsec></div>...

当我将

Hi

更改为

Hello

时，指令的视图不会更新，直到我删除缓存.

解决方案

这样做的原因是 Angular 在开始时只获取一次文件.您可以尝试使用 templateUrl 作为函数并附加时间戳，以便每次都获得新的模板 url.

templateUrl: function() {返回partials/app-mainsec.html?"+ +新日期()；}

但可能只有在编译指令时它才会刷新您的指令.

I have a problem with angular directives. When I edit the content of a file referenced via templateUrl, the result doesn't appear until I delete the cache. I have the following code:

Directive.js

.directive('appMainsec',['$window', function ($window){
    var objectMainSec = {
        restrict: 'A',
        templateUrl: 'partials/app-mainsec.html',
        controller: function (){},
        controllerAs: 'MainSectCtrl',
        link: function ($scope,elemnt,attr){
            elemnt.css('height', ($window.innerHeight - ($window.innerHeight * .25)) + 'px');
        }
    };

    return objectMainSec;
}]);

app-mainsec.html

<div><h1>Principal</h1></div>

and index.html

...
 <div app-mainsec></div>
...

When I change <h1>Hi</h1> to <h1>Hello</h1>, the view of directive doesn't update until I delete the cache.

解决方案

The reason for that is that Angular fetch a file only once at the begining. You can try to use templateUrl as function and append timestamp so you get new template url each time.

templateUrl: function() {
    return 'partials/app-mainsec.html?' + +new Date();
}

But probably, it will refresh your directive only when directive will be compiled.

这篇关于AngularJS 指令 templateUrl 不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！