有一次绑定：更新模型和重新渲染视图 [英] One time binding: update model and re-render view

问题描述

我如果可能的话，不知道采用了棱角分明一次结合，完全重新渲染模型更新后视图/模板，还通过重新编译模板。
例如，一个按钮preSS，也许在方式作出反应的工作：我更新模型，并明确强制更新视图。
基本上，这是我想实现：

  //控制器
angular.module（'应用'，[]）。控制器（'AppCtrl'，函数（$范围）{
    $ scope.items = [
        {ID：1}，
        {ID：2}，
        {ID：3}
    ];    $ scope.addAndRefresh =功能（）{
        $ scope.items.push（{ID：4}）;
        //手动调用这里呈现的逻辑？
    };
}）;
＆LT;！ -  HTML模板 - ＆GT;
＆LT; D​​IV NG重复=项::项目＆GT;
    {{item.id}}
＆LT; / DIV＆GT;
＆LT;按钮NG点击=addAndRefresh（）＆gt;添加＆LT; /按钮＆GT;
 

点击添加按钮，我想刷新视图以查看新添加的项目。

解决方案

我试图找出一些方法来做到这一点优雅的为好。我希望有内置的框架刷新一次绑定的东西。所有我想出了用ngIf删除我想刷新和添加回的元素。

下面是一个演示。单击Add Item按钮，你会看到该列表中的不可以刷新做一次性的重复序列结合。检查刷新值并再次单击，项目将被更新：

\r

\r

VAR应用= angular.module（'示范'，[]）;\r
\r
app.controller（'RefreshCtrl'，函数（$范围，$超时）{\r
  变种计数器= 4;\r
\r
  $ scope.visible = TRUE;\r
\r
  $ scope.items = ['项目1'，'项目2，项目3'];\r
\r
  $ scope.addItem =功能（）{\r
\r
    如果（$ scope.refresh）{\r
      $ scope.visible = FALSE;\r
    }\r
\r
    $ scope.items.push（'项目'+计）;\r
\r
    反++;\r
\r
    $超时（函数（）{\r
      $ scope.visible = TRUE;\r
    }）;\r
  };\r
\r
}）;

\r

＆LT;脚本SRC =HTTPS：//$c$c.angularjs。组织/ 1.3.17 / angular.js＆GT;＆LT; / SCRIPT＆GT;\r
＆LT;链接rel =stylesheet属性HREF =htt​​ps://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css＆GT;\r
\r
＆LT; D​​IV NG-应用=演示NG-控制器=RefreshCtrl级=容器＆GT;\r
  ＆LT;按钮类=BTN BTN-默认的NG点击=的addItem（）＆gt;添加项目＆lt; /按钮＆GT;\r
  ＆LT;输入类型=复选框NG模型=刷新/＆GT;刷新值\r
  ＆LT; D​​IV NG-IF =看得见＆GT;\r
    ＆LT; H3 NG重复=在项目::项目＆GT; {{}项}＆LT; / H3 GT＆;\r
  ＆LT; / DIV＆GT;\r
\r
  ＆LT; P＆GT;项目数组：{{}项目}＆LT; / P＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

I was wondering if possible, using angular one time binding, to completely re-render the view/template after a model update, also by recompiling the template. For instance, on a button press, maybe in the way react works: I update the model and explicitly force to update the view. Basically here is what I am trying to achieve:

// 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>

By clicking on the "Add" button I would like to refresh the view to see the newly added item.

解决方案

I was trying to figure out some way to do this elegantly as well. I wish there was something built into the framework to refresh one-time bindings. All I came up with is using ngIf to remove the element I wanted to refresh and the add it back.

Here's a demo. Click the Add Item button, you'll see that the list does not refresh do to the one-time binding on the repeat. Check the refresh values and click again, and the items will be updated:

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>

这篇关于有一次绑定：更新模型和重新渲染视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！