通过jQuery调用AngularJS函数时数据绑定失效问题排查

嘿，我懂你现在碰到的麻烦——用jQuery调用Angular的scope函数后，页面绑定的数据就是不更新对吧？其实这和Angular的核心机制有关。

为啥会出现这个问题？ #

Angular的视图更新全靠它的脏检查循环（Digest Cycle），这个循环会在Angular自己管控的事件（比如ng-click点击、$http请求完成）结束后自动触发，对比数据变化再更新视图。但你用的是原生onclick（jQuery触发的操作也属于这类），这是Angular上下文以外的操作，Angular完全没察觉到数据已经被修改了，自然不会去更新页面。

怎么搞定它？ #

你只需要手动告诉Angular：“数据变了，快检查更新视图！”，这里有两种靠谱的方法：

方法1：在jQuery触发的函数里调用$scope.$apply()

修改你的myFunc函数，拿到scope并调用完目标函数后，加一行触发脏检查的代码：

function myFunc() {
  var scope = angular.element($('#home')).scope();
  scope.wrapUpError([{ Name: "1", City: "2", Country: "3" }]);
  scope.$apply(); // 手动触发脏检查，让视图同步更新
}

方法2：用$timeout安全触发（避免报错风险）

如果担心直接调用$apply()可能碰到“digest already in progress”的错误，可以用Angular的$timeout服务，它会自动在合适的时机触发脏检查。不过要记得先在控制器里注入$timeout依赖：

首先修改控制器：

bng_app.controller("myCtrl", function($scope, $timeout) {
  $scope.wrap_up_errors = [{ Name: "Alfreds Futterkiste", City: "Berlin", Country: "Germany" }];
  $scope.wrapUpError = function(a) {
    $scope.wrap_up_errors = a;
    console.log($scope.wrap_up_errors)
  };
});

然后修改myFunc：

function myFunc() {
  var scope = angular.element($('#home')).scope();
  scope.$timeout(function() {
    scope.wrapUpError([{ Name: "1", City: "2", Country: "3" }]);
  });
}

这样就能确保Angular检测到数据变化，页面绑定的内容也会跟着更新了。

内容的提问来源于stack exchange，提问作者ata