javascript - angular $scope 改变时不更新 HTML

Question

我的 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 中有这样的数据绑定(bind):

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

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

Answer 1

是 - 在 angular 1.3.x 中引入 - 一次性绑定(bind)

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

对于 ng-repeat 这样做:

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

阅读更多信息 Exploring Angular 1.3 - One-time bindings