angularjs – 一次绑定:更新模型并重新渲染视图

我想知道是否可能,使用角度一次性绑定,在模型更新后完全重新渲染视图/模板,也可以通过重新编译模板.
例如,在按下按钮时,可能在反应方式中工作:我更新模型并明确强制更新视图.
基本上这就是我想要实现的目标:
// controller
angular.module('app',[]).controller('AppCtrl',function($scope) {
    $scope.items = [
        {id: 1},{id: 2},{id: 3}
    ];

    $scope.addAndRefresh = function() {
        $scope.items.push({id: 4});
        // manually call render logic here???
    };
});


<!-- HTML template -->
<div ng-repeat="item in ::items">
    {{item.id}}
</div>
<button ng-click="addAndRefresh()">Add</button>

通过单击“添加”按钮,我想刷新视图以查看新添加的项目.

我试图找出一些方法来优雅地做到这一点.我希望框架内置一些内容来刷新一次性绑定.我想出的就是使用ngIf删除我想要刷新的元素并将其添加回去.

这是一个演示.单击“添加项目”按钮,您将看到列表未刷新对重复的一次性绑定.检查刷新值并再次单击,项目将更新:

var app = angular.module('demo',[]);

app.controller('RefreshCtrl',function($scope,$timeout) {
  var counter = 4;

  $scope.visible = true;

  $scope.items = ['Item1','Item2','Item3'];

  $scope.addItem = function() {

    if ($scope.refresh) {
      $scope.visible = false;
    }

    $scope.items.push('Item' + counter);

    counter++;

    $timeout(function() {
      $scope.visible = true;
    });
  };

});
<script src="https://code.angularjs.org/1.3.17/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div ng-app="demo" ng-controller="RefreshCtrl" class="container">
  <button class="btn btn-default" ng-click="addItem()">Add Item</button>
  <input type="checkBox" ng-model="refresh" />Refresh Values
  <div ng-if="visible">
    <h3 ng-repeat="item in ::items">{{item}}</h3>
  </div>

  <p>Items Array: {{items}}</p>
</div>

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...