我想知道是否可能，使用角度一次性绑定，在模型更新后完全重新渲染视图/模板，也可以通过重新编译模板。
例如，在按下按钮时，可能在反应方式中工作：我更新模型并明确强制更新视图。
基本上这就是我想要实现的目标：
// 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>
根据您的目标，我建议使用以下两种解决方案之一：
我是前者的作者，它与其他解决方案的最大区别在于可以选择挂钩 $parse 服务。
因此，您可以使用介绍 {{:refreshkey:expression}}/:refreshkey:expression 大多数语法 （如果不是全部） Angular中接受表达式的区域。
在您的情况下，实现可能看起来像这样：
JS
angular.module('app', []).controller('AppCtrl', function($scope) {
$scope.items = [
{id: 1},
{id: 2},
{id: 3}
];
$scope.addAndRefresh = function() {
$scope.items.push({id: 4});
/**
* '$$rebind' is the internal namespace used by angular-bind-notifier.
* 'refresh' is the refresh key used in your view.
*/
$scope.$broadcast('$$rebind:refresh');
};
});
标记
<!-- HTML template -->
<div ng-repeat="item in :refresh:items">
{{::item.id}}
</div>
<button ng-click="addAndRefresh()">Add</button>
或者，如果你想要一些半动态的东西
JS
angular.module('app', []).controller('AppCtrl', function($scope) {
$scope.items = [
{id: 1},
{id: 2},
{id: 3}
];
$scope.add = function() {
$scope.items.push({id: 4});
};
});
标记
<!-- HTML template -->
<div bind-notifier="{ refresh: items.length }">
<div ng-repeat="item in :refresh:items">
{{::item.id}}
</div>
</div>
<button ng-click="add()">Add</button>
看看 自述 和这个 jsBin 一些用法示例。