AngularJs - UI中的字段未反映更新的模型值

Question

这是Plunkr

一个常见的场景,我有一个以ng-repeat显示的项目集合.对于显示的每一行,我都有一个启动进程(文件上载)的按钮和一个状态字段.我希望我的UI能够在过程状态发生变化时进行反映.这在Angular w /双向绑定中应该很容易,对吧？

我在ng-repeat上创建了一个第二个(子)控制器,这样我就可以简单地更新它自己范围内的项目状态,而不是处理项目集合,特别是因为这个过程是异步的,用户可能会上传很多文件并发.

问题:我对Ang/JS中的$ scope的理解缺乏 - 大声笑.但是,严重的是,当更新范围模型值时,UI中的绑定{{xxx}}值不会更新.单击任一按钮并观察警报.如何让UI正确更新？

仅供参考 - 实际上该按钮调用外部库上的API来上传文件并返回给我一个URL以检查我上传的状态.然后我在setInterval()循环中轮询url以ping状态直到完成或错误.我已经简化了Plunkr中的那个部分,因为这种复杂性本身不是问题. Plunkr

    <!DOCTYPE html>
<html ng-app="myapp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.7/angular.js" data-semver="1.2.7"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
  <table>
      <th></th>
      <th>Id</th>
      <th>Name</th>
      <th>Status</th>
    <tr ng-repeat="item in items" ng-controller="ChildCtrl">
        <td><button ng-click="updateStatus(item)">click</button></td>
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.status}}</td>
    </tr>

  </table>
  </body>

</html>

JS

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

app.controller('MainCtrl', function($scope) {
  $scope.items = [ {id: 1, name: "Moe", status: "init"}
  , {id: 3, name: "Larry", status: "init"}
  , {id: 2, name: "Curly", status: "init"}
  ];
});


app.controller('ChildCtrl', function($scope) {
  $scope.updateStatus = function(item){
    $scope.myItem = item;
    alert('child: ' + item.id + ' status: ' + item.status);
    item.status = 'clicked';
    alert('status just update in UI to: ' + item.status);

    callResult = fakeAjaxCall($scope);
    alert('callResult: ' + callResult);
  };

  var fakeAjaxCall = function(scope){
    setTimeout(function (item) {
        if (-1 == -1) {  //success
            result = "Wow, it worked!";
            alert('current status: ' + scope.myItem.status);
            alert('ajax result: ' + result);
            scope.myItem.status = result;
            alert('new status: ' + scope.myItem.status);
            alert("but the status in the UI didn't update");
        }
    }, 2000);
  };

});

Answer 1

您可能需要使用$超时,而不是setTimeout有消化周期内的角从调用了哪些更新模式或您必须调用自己消化周期(通过包装的代码 scope.$apply(),scope.evalAsync等...),原因是角有不知道什么时候setTimeout是完成,因为它不会发生角度.当你有一个有角度的方式来做事情并且你可以自由地使用它时,你应该尽量不要手动调用摘要周期.在这种情况下,您可以替换为setTimeout,$timeout并且模型更改将自动反映在视图中,因为角度在$timeout完成时调用摘要周期.另一个优点是,当使用$timeout它时,返回一个你可以链接的承诺,并且仍然有反对时实现的promise模式setTimeout.

app.controller('ChildCtrl', function($scope, $timeout) {
  $scope.updateStatus = function(item){
    $scope.myItem = item;
    console.log('child: ' + item.id + ' status: ' + item.status);
    item.status = 'clicked';
    console.log('status now updates in UI to: ' + item.status);

    callResult = fakeAjaxCall($scope);
    console.log('callResult: ' + callResult);
  };

  var fakeAjaxCall = function(scope){
    $timeout(function (item) {
        if (-1 == -1) {  //success
            result = "Wow, it worked!";
            console.log('current status: ' + scope.myItem.status);
            console.log('ajax result: ' + result);
            scope.myItem.status = result;
            console.log('new status: ' + scope.myItem.status);
            console.log("but the status in the UI doesn't update");
        }
    }, 2000);
  };

Plnkr

在调试异步操作时,我建议使用console.log(或$log)代替alert来进行调试.