Javascript 在AngularJS中使用$interpolate减少自动生成的观察者

在AngularJS中使用

ng repeat

指令往往会产生大量的观察者，因为每行包含多个

ng bind

指令，分别显示行的数据。每个站点我大约有2.500个观察者：100行，每行包含7列，每行包含一个

ng bind

等。这就是这么多观察者的总和

我不能使用一次性绑定，因为数据可能会随时间变化（从后端重新加载，而不是由用户修改）。此外，分页不是解决方案，因为表的分组方式禁止所有分页方法

因此，我正在使用AngularJS的

$interpolate

函数。特别是，我想将单行的html提取到一个新模板中，在JavaScript代码中插入该行模板，并将连接的行添加到我的

$scope

现在我有两个问题：

总的来说，这是一个糟糕的方法吗？我仍然将标记（一个表行在一个专用的HTML文件中描述）与逻辑分开，但可能还有其他我目前忽略的缺点

如何将行模板加载到变量中，以便将其传递给AngularJS函数

---

我无法回答您的问题1，但q.2（加载模板并在JS函数中使用它）可以通过以下方式实现：

// add to $templateCache
angular.module("myApp", [])
.run(["$templateCache", function($templateCache) {
    $templateCache.put("myRow.html",
        "<tr><td>my name is: {{name}}</td></tr>");
}]);

//from your directive...
// retrieve from $templateCache and apply to element
var template = $templateCache.get('myRow.html');
var context = { name: "John Smith" };
var result = $interpolate(template)(context);

$element.append(result);

//添加到$templateCache
angular.module（“myApp”，[]）
.run（[“$templateCache”），函数（$templateCache）{
$templateCache.put（“myRow.html”，
“我的名字是：{{name}”）；
}]);
//根据你的指示。。。
//从$templateCache检索并应用于元素
var template=$templateCache.get（'myRow.html'）；
var context={name:“John Smith”}；
var结果=$interpolate（模板）（上下文）；
$element.append（结果）；

更好的方法是在数组更改时替换html。您可以使用以下指令查看阵列是否已更改：-

app.directive("listChanged", function ($animate) {
    return {
        transclude: 'element',
        restrict: "E",
        link: function ($scope, $element, $attr, ctrl, $transclude) {
            var previousElement;
            $scope.$watch($attr.products, function ngIfWatchAction(value) {
                if (previousElement) {
                    previousElement.remove()
                }

                $transclude(function (clone, newScope) {
                    previousElement = clone;
                    $animate.enter(clone, $element.parent(), $element);
                });

            });
        }
    }
});

并使用如下指令：-

{{:：product}}

您可以找到正在运行的示例

---

希望有帮助：）

您是否绝对确定监视者是问题的根源？分析是否支持这种说法？分页也能解决问题吗，但这应该是最后的手段，只有在真正必要时才进行。@musicial\u感谢您的评论，我更新了我的问题您说您不能使用一次性绑定，因为数据可能会更改-您是在暗示此数据将在后台更改并需要更新，还是暗示用户可能需要更改数据？因为我有一个JSFIDLE，它可以证明您可以使用一次性绑定，并且仍然可以让用户更改数据：您确定您的浏览器能够呈现2500个复杂节点的列表吗？您是否正在使用某个唯一ID的

跟踪？你知道虚拟列表吗？上帝太坏了。。100行hah：/