当角度$scope发生变化时，不要更新 HTML

Don't update HTML when angular $scope changes

本文关键字：HTML 更新 变化 scope      更新时间：2023-09-26

我的JS中有for循环：

for (var i=0;i<2;i++) {
    $scope.widget = widgets[i];
    $scope.header = widgets[i].data.header;
    $scope.items = widgets[i].data.items;
    $scope.footer = widgets[i].data.footer;
    var widget = widgets[i];
    var div1 = '<div id="' + widget.id + '" class="' + widget.width +'" >';
    var div2 = '<div class="panel" style="background-color:' + widget.color +';color:white;">';
    var header = widget.body.headerTemplate;
    var panelStart =  '<div class="panel-collapse pull out">';
    var widgetBody = widget.body.itemTemplate;
    var widgetFooter = widget.body.footerTemplate;
    var panelEnd = '</div>';
    var div2End = '</div>';
    var div1End = '</div>';
    var widgetHTML = div1 + div2 + header + panelStart + widgetBody + widgetFooter + panelEnd + iv2End +iv1End;
    console.log(widgetHTML);
    var linkingFunction = $compile(widgetHTML);
    var elem = linkingFunction($scope);
    $(elem).appendTo("#widgetsContainer");
}

将一些 HTML 附加到div 容器。在该 HTML 中，有如下所示的数据绑定：

<a href='{{header.redirectUri}}'>{{header.title}}</a>

当然，$scope变量每次循环时都会更改，最终所有范围变量都会使用最后一个值更新 HTML。绘制 HTML 后是否可以不更新？

是 -

在 angular 1.3.x 中引入 - 一次性绑定

<a href='{{::header.redirectUri}}'>{{::header.title}}</a>

对于 ng 重复，请执行以下操作： 

'ng-repeat="item in ::items"'

在探索 Angular 1.3 - 一次性绑定中阅读更多内容

使用单向绑定，如果您使用 Angular 1.3.x，则使用 

<a href='{{::header.redirectUri}}'>{{::header.title}}</a>

或使用绑定一次

相关文章：