如何更改 AngularJS 中的一次性绑定数据？

Question

我有一个 div，其中显示诸如 手机号码、姓名等之类的详细信息，例如 {{::mobilenumber}}, {{::name}}

在那个 div 中，有一个按钮可以在新表单中呈现相同的值

通过使用表单中的按钮，用户可以更改值，但在我显示详细信息的 div 中，单击按钮后值不会更改

<form ng-submit="form.$valid && saveDetails()">
  <input type="text" class="form-control capitalize" placeholder="Full Name" name="fullname"ng-model="address.fullname" maxlength="50"  ng-trim="true" autocomplete="off" required >
  <span><!-- Mobile Number required --></span>

  <input type="text" class="form-control capitalize" placeholder="Mobile Number" name="mobilenumber" id="mobilenumber"                        ng-model="address.mobilenumber" ng-minlength="10" maxlength="12"  ng-trim="true" autocomplete="off" required>
  <span><!-- Mobile Number required --></span>

  <button ng-click="form.submitted=true><span>Update User Details</span</button>
</form>

我只想使用单向绑定吗？

我尝试使用$scope.$broadcast('$$rebind:refresh');，但值仍然没有改变。

任何帮助或指导都会对我很有帮助。

Answer 1

如果你真的想保持某种单向绑定...

您可以做的只是使用两种方式绑定，但在两者之间使用数据集。它会产生一些开销，但它可能是解决您的问题的方法。为了更新视图，您只需更新复制的数据。您可以控制视图中的数据何时更新。

Answer 2

当您在 html 中使用插值 {{mobilenumber}} 时，Angular 会创建一个观察者来观察范围内的属性 mobilenumber：

$scope.$watch('mobilenumber', function() {
   // update DOM
});

只要值发生变化，DOM 就会更新。

但是，如果你使用一次性绑定{{:mobilenumber}}，一旦你的回调接收到真值，Angular 就会移除观察者：

var unwatch = $scope.$watch('mobilenumber', function() {
   if (value) {
     // update DOM
     unwatch();
   }
);

由于没有更多的 mobilenumber 观察者，每当您在 saveDetails() 方法内更新范围内的值时，都不会触发回调并且不会更新 DOM。

如果您计划不断更新值，则不应使用一次性绑定。使用常规绑定：

<div>{{mobilenumber}}</div>