[英]AngularJS ng-include only once
How can I use ng-include
in such way that it's content will be loaded only once? 如何使用
ng-include
使其内容仅被加载一次? Here is what I have: 这是我所拥有的:
<div data-ng-if="%condition-1%" data-ng-include="%url-1%"></div>
<div data-ng-if="%condition-2%" data-ng-include="%url-2%"></div>
<div data-ng-if="%condition-3%" data-ng-include="%url-3%"></div>
...
In my case only one condition is true at some moment of time. 就我而言,在某个时刻只有一个条件成立。 And any condition can change its value many times during page lifetime.
并且任何条件都可以在页面生存期内多次更改其值。 So
ng-include
will load the same content again and again. 因此
ng-include
将一次又一次加载相同的内容。 How can I tell Angular to process ng-include
only once - when the appropriate condition becomes true for the first time? 当适当的条件首次变为真时,我如何告诉Angular仅处理
ng-include
一次? Loading them all at once will kill the page because every template is large and heavy. 一次全部加载它们会杀死该页面,因为每个模板又大又重。 Also there is no strict sequence of condition changes, for example,
condition-3
may never become true during page lifetime - I'd like not to load url-3
content at all in this case. 此外,条件更改没有严格的顺序,例如,
condition-3
可能在页面生命周期内永远不会变为真-我想在这种情况下完全不加载url-3
内容。 Thanks! 谢谢!
UPDATE Yes, template is already on cache. 更新是,模板已在缓存中。 But it has a complicated internal structure like references to external images, iframes and so on - all this things are reloading each time when I'm using
ng-include
. 但是它具有复杂的内部结构,例如对外部图像,iframe等的引用-每当我使用
ng-include
时,所有这些东西都会重新加载。
You have many solutions but only 2 come to my mind at the moment 您有很多解决方案,但目前只有两个
1° Replace the ng-if for a ng-show, as the ng-if deletes the dom and all children scopes available, forcing the framework to make the request once again, while if you were using ng-show, the dom would only be hidden and the request would have only be made once. 1°将ng-if替换为ng-show,因为ng-if会删除dom和所有可用的子作用域,从而迫使框架再次提出请求,而如果您使用ng-show,则dom仅会将被隐藏,而该请求只能发出一次。
2° If you do need to use ng-if and the content from the server is static, you could cache it on the javascript layer by manually accesing the $templateCache service provided by angular, or if the content you wish to load is html, you could either use the $templateCache service on the javascript layer or use the ng-template tag to preload that data. 2°如果确实需要使用ng-if并且服务器中的内容是静态的,则可以通过手动访问angular提供的$ templateCache服务将其缓存在javascript层上,或者如果要加载的内容是html,您可以在javascript层上使用$ templateCache服务,也可以使用ng-template标记预加载该数据。
Example: 例:
<script id="url/you/want.html" type="text/ng-template">
<div>I am preloaded dom that responds to the url/you/want.html
requests made by this application
</div>
</script>
Cheers 干杯
How about using only one ng-include and using some logic in the controller to switch which source to use using a binding? 如何仅使用一个ng-include并在控制器中使用某些逻辑来通过绑定切换要使用的源? This way only one will ever be loaded at a time.
这样,一次只能加载一个。
Controller 调节器
function($scope) {
$scope.activeTemplate = null; //some default or even null
$scope.$watch('condition', function(newvalue) {
//whatever logic you need to switch template
if (newvalue == 'condition1') {
$scope.activeTemplate = '/path/to/condition1.html';
} else if (newvalue == 'condition2') {
$scope.activeTemplate = '/path/to/condition2.html';
} else {
$scope.activeTemplate = '/path/to/default.html';
}
});
}
This way only one template will ever be loaded at a time, and you've reduced the number of bindings from 3 to 1. (however you have added a watch so effectively from 3 to 2 maybe) 这样,一次只能加载一个模板,并且绑定的数量从3个减少到1个。(但是,如此有效地将手表从3个添加到了2个)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.