Question

我想使用ng-repeat指令将一些数据绑定到div。虽然调用成功，但我获取数据并将其存储在范围变量中，以便能够使用ng-repeat显示它

     <div data-ng-app="myapp" id="sidestatus" style="position:fixed;top:50%;right:0;height:200px;width:200px;background-color:red;" data-ng-controller="myctrl">//wont bind here after successful execution
             <ul>
                 <li data-ng-repeat="x in obj">
                      {{x.heading+' '+x.id+' '+x.name }}
                 </li>
            </ul>
      </div>

我的javascript

 var app = angular.module("myapp", []);
 app.controller("myctrl", function ($scope, $http) {
     var obj2=new Array();
     $.ajax({
         type: "POST",
         url: "NotifierService.asmx/getdata",
         data: {},
         contentType: "application/json; charset=utf-8",
         dataType: "json",
         success:function (response) {
             var res = response.d;
             var res4 = res.split(",");
             for (var i = 0; i < res4.length; i++) {
                 var res2 = res4[i].split(":");
                 obj2[i] = {}
                 obj2[i].heading = res2[0];
                 var res3 = res2[1].split("/");
                 obj2[i].id = res3[0];
                 obj2[i].name = res3[1];
             }
             $scope.obj = obj2; 
            //successfully execute the success function everytime
          },
          error:function () { alert("failure");}
     });
 });

正在发送的数据

           "heading1:23/name1,heading2:24/name2"

Answer 1

无论何时在AngularJS“受控”函数之外执行某些代码，AngularJS都不知道任何范围内是否有某些变化，因此它不会尝试查找更改并使用如果有任何变化。

在您的代码中，您正在使用jQuery进行Ajax调用。该Ajax调用的回调是在AngularJS控制代码之外执行的，它发生在我之前解释过的内容中。因此，您需要做的是告知AngularJS范围内可能已发生变化。您有两种选择。

$ scope。$ digest（）用于告诉AngularJS检查更改。所以你的代码看起来像这样：

success:function (response) {
  var res4 = res.split(",");
  var res = response.d;
  for (var i = 0; i < res4.length; i++) {
     //... 
  }
  $scope.obj = obj2; 
  $scope.$digest(); //hey AngularJS, look for changes to update the scope!
}

另一种方法是使用$ scope。$ apply。此方法告诉AngularJS执行作为参数传递的函数，然后（函数是否正确执行，抛出和错误）检查范围的变化。所以你的代码看起来像：

success:function (response) {
  $scope.$apply(function() {  //hey AngularJS, execute this function and update the view!
     var res = response.d;
     var res4 = res.split(",");
     for (var i = 0; i < res4.length; i++) {
         //...
     }
     $scope.obj = obj2;
  })
}

Answer 2

使用availsync功能可以解决问题。如果没有，请尝试使用settimeout。它只是因为双向绑定问题。

Answer 3

与@LionC提到的一样，你应该研究为什么$ http会引发错误。

您可以尝试：

success: function () {
    $scope.$evalAsync(function () {
        var res = response.d;
        var res4 = res.split(",");
        for (var i = 0; i < res4.length; i++) {
            var res2 = res4[i].split(":");
            obj2[i] = {}
            obj2[i].heading = res2[0];
            var res3 = res2[1].split("/");
            obj2[i].id = res3[0];
            obj2[i].name = res3[1];
       }
       $scope.obj = obj2; 
    });
}

但我完全建议你不要！更多信息："Thinking in AngularJS" if I have a jQuery background?

希望这有帮助！

插件演示：http://embed.plnkr.co/YWQ1LyZWm2fzwgPxX4kk/preview

$scope.$evalAsync的基本用法是获取角度以将范围内的更改应用于DOM。还有其他方法可以做到这一点：http://www.panda-os.com/2015/01/angularjs-apply-digest-and-evalasync/#.VZ0JIPmqqko

希望这有帮助！

成功调用ajax后，ng-repeat不绑定

3 个答案: