jQuery ajax调用后角度控制器作用域未更新

Question

我有这段代码，我看不出问题的根源在哪里，我在chrome控制台我的控制器中没有发现任何错误：

function notifController($scope) {
  $scope.refreshMsgs = function () {
    $.post("notification-center-trait.aspx")
      .success(function (data) {
        $("#loadedthings").html(data);
        newMsgs = JSON.parse($("#label1").html());
        $scope.msgs = newMsgs;
      });
  }
  $scope.refreshMsgs();
}

label1和label2在div-loadedthings中正确加载；

控制台中的newMsgs按照它应该的方式进行解析；

我让它为其他页面工作，但似乎我错过了这一页上的一些东西。我有

<div ng-controller="notifController"> 
    <div class="row">
    {{msgs.length}} new msgs : 
              <table class="table">
                  <tbody >
                      <tr ng-repeat="msg in msgs">
                        <td>
                            {{msg.sender}}
                        </td>
                        <td>
                            {{msg.message}}
                        </td>
                        <td>
                            {{msg.date}}
                        </td>
                      </tr>
                  </tbody>
              </table>
</div>
</div>

当我执行此命令时，控制台中会出现“未定义”：angular。元素（$0）。scope（）




Answer 1

忽略我在评论中指出的其他架构问题，真正的问题是您使用的是jQuery的ajax，而不是Angular的$http。当你不通过Angular做类似的事情时，你在Angular的范围之外工作，它不知道有什么变化。虽然不理想，但可以使用$scope$应用让angular知道某些内容在其知识范围之外进行了更新。看起来是这样的：

$scope.$apply(function() {
  $scope.msgs = newMsgs;
});

这就告诉Angular，您已经从它不知道的上下文（本例中的jQueryAjax调用）修改了它需要知道的内容。

$scope有一些有效的用法$apply（），例如在事件处理程序中，但在大多数其他情况下，这是不良做法的标志。对于ajax调用，您肯定应该使用Angular的$http。