重用previously实例化的模板与NG-包括 [英] Reusing previously instantiated templates with ng-include

问题描述

我需要一个＆LT;选择＆GT; 窗体上控制剩余的可用输入。这是通过结合具有角容易实现的＆LT;选择方式＆gt; 到的src NG-包括

I have a need for a <select> on a form to control the remaining available inputs. This is achieved easily with angular by binding the <select> to the src of an ng-include.

问题每个用户更改选定值（因而的src 模板），角编译从无到有的模板，并附加了一个新的作用域的时间。这具有擦拭所有输入数据的每个时间的效果。如果他们变回pviously选择选项$ P $，所有的现场数据，他们$ pviously进入依然存在p $用户的期望。

The problem is each time the user changes the selected value (and hence the src template), angular compiles the template from scratch and attaches a new scope. This has the effect of wiping all the input data each time. The user expects if they change back to a previously selected option, all the field data they previously entered will still be there.

是否有任何内置的方式来达到预期的行为？理想的情况是一个选项，使 NG-包括将重新使用previously编译模板和相关的范围是什么？

Is there any built in way to achieve the desired behaviour? Ideally an option so that the ng-include will re-use a previously compiled template and associated scope?

一个解决方法是 NG-包括所有模板，并使用 NG-节目，只显示当前一。这似乎重虽然，有很多不必要地在网页的DOM元素。 （尤其是对我的用例，其中将有大约〜20种不同的模板，这整个＆LT;选择＆GT; 元素和动态模板控件可以在一个页面了上重复至40倍。）

One workaround is to ng-include all the templates, and use ng-show to only display the current one. This seems heavy though, there is a lot of DOM elements on the page unnecessarily. (Especially for my use-case where there will be about ~20 different templates, and this whole <select> element and dynamic template control may be repeated on a single page up to 40 times.)

下面是一个的jsfiddle 。理想的结果是在模板1计数器改变时，下拉菜单模板2回1被持久化。

Here is a jsFiddle. The desired outcome is the counter on template 1 is persisted when changing the dropdown to template 2 and back to 1.

推荐答案

我发现这个问题有意思。短把模型中的服务（这可能是正确的方式），我不认为有一个内置的方式来缓存模板与NG-包括不使用NG重复，这表现的 nofollow的>。

I found this question interesting. Short of putting the model in a service (which is probably the correct way), I don't think there is a built in way to cache templates with ng-include without using ng-repeat, as demonstrated in this fiddle.

<div ng-controller="Ctrl">
    <select ng-model="template" ng-options="t.name for t in templates">
     <option value="">(blank)</option>
    </select>
    url of the template: <tt>{{template.url}}</tt>
    <hr/>
    <div ng-repeat="t in templates" ng-include="t.url" ng-show="template.name == t.name">
     </div>
  </div>

正如你指出的，这种解决方案的缺点是你最终有很多的DOM元素。

As you point out, the downside of this solution is you end up with a lot of elements in the DOM.

为了好玩，我写了一个版本的NG-包括缓存模板元素和重用它。您仍最终可能在最坏的情况下产生，正如许多DOM节点，但由于它们只在按需创建的，并且因为只有一个是以往在任何给定时间在DOM，应该从一个角度透视仍相当有效。

For fun, I wrote a version of ng-include that caches the template element and reuses it. You still end up potentially creating just as many DOM nodes in the worst case, but since they are created only on-demand, and since only one is ever in the DOM at any given time, it should remain fairly efficient from an angular perspective.

下面是该指令小提琴。

.directive('cacheInclude', function ($compile, $http, $templateCache) {
    return {
        link: function (scope, element, attrs, ctrl) {
            var cache = {};
            var currentElement = element;
            var replaceCurrent = function(cacheEntry) {

                currentElement.replaceWith(cacheEntry);
                currentElement = cacheEntry;
            };
            scope.$watch(function(){
                return scope.$eval(attrs.src);
            }, function () {
                var src = scope.$eval(attrs.src);

                if (!cache[src]) {
                    $http.get(src, {cache: $templateCache}).then(function (result) {


                        cache[src] = $compile(result.data.trim())(scope.$new());
                        replaceCurrent(cache[src]);
                    });
                } else {

                    replaceCurrent(cache[src]);
                }
            });
        }
    }
})

这不是内置，但我认为这是一个很好的中间立场的解决方案。注意，该指令是例如只有，仍然需要错误处理，等等。

It's not "built in", but I think it is a good middle ground solution. Note, the directive is "for example only" and still requires error handling, etc.

这篇关于重用previously实例化的模板与NG-包括的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！