Javascript 使用ng include重用以前实例化的模板

我需要在表单上添加

，以控制剩余的可用输入。这可以通过将

绑定到

ng include

的src来轻松实现

问题是，每次用户更改所选值（以及

src

模板）时，angular都会从头开始编译模板并附加一个新范围。这具有每次擦除所有输入数据的效果。用户希望，如果他们更改回以前选择的选项，他们以前输入的所有字段数据仍将存在

是否有任何内在的方式来实现预期的行为？理想情况下，

ng include

将重复使用以前编译的模板和相关范围的选项

一种解决方法是

ng包含所有模板，并使用
ng show
仅显示当前模板。虽然这看起来很沉重，但是页面上有很多不必要的DOM元素。（特别是在我的用例中，大约有20个不同的模板，整个
元素和动态模板控件可以在一个页面上重复多达40次。）

这是一本书。理想的结果是，将下拉列表更改为模板2并返回到1时，模板1上的计数器将保持不变。
我发现这个问题很有趣。除了将模型放入服务中（这可能是正确的方法），我不认为有一种内置方法可以使用ng include缓存模板，而不使用ng repeat，如所示

它不是“内置的”，但我认为它是一个很好的中间解决方案。注意，该指令“仅用于示例”，仍然需要错误处理等。
将每个ngInclude表单视图信息存储到工厂中。无论当前加载的模板是什么，它都将保持不变。为什么不使用存储值并跨不同模板处理它们的服务呢？谢谢Joe！如果没有内置的方法，您的
cacheInclude
指令正是我计划尝试编写的。不幸的是，它不能完全工作，当DOM元素被缓存时，绑定似乎已经丢失。e、 g.在重新选择template1后，+按钮单击不再调用控制器上的
inc（）
函数。我也不知道为什么。我想可能是
currentElement.replaceWith（cacheEntry）的副作用破坏了作用域但似乎不是-没有引发
$destroy
事件。我确认它在正常情况下确实会被触发-尝试在这个小提琴中将
缓存include
更改回正常
ng include
，您可以看到事件在起作用：好的，这里有一些奇怪的发现。看起来绑定并没有完全丢失，只是按钮的
ng click
处理程序。在这种情况下，内容绑定
{{myContent}}
仍然有效，而按钮的点击则无效：有什么想法吗？我完全被难住了。我猜你需要使用detach和append而不是replaceWith。我只是在玩：）你100%正确，
replaceWith
剥离事件处理程序，
detach
没有。再次感谢乔！
<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>

.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]);
                }
            });
        }
    }
})