AngularJS数据绑定失效：原生JavaScript调用AngularJS函数时赋值不更新

问题根因 #

你在AngularJS上下文之外的原生JavaScript回调中修改$scope属性时，AngularJS的脏值检测机制不会自动触发，因此无法感知到数据变化，页面绑定也就不会更新。

解决方案 #

你只需要手动触发一次AngularJS的脏值检测循环即可，有两种常用的修改方式：

方案1：在原生JS调用后手动调用$apply #

修改你的javaScriptCall函数：

function javaScriptCall(value){
    var scope = angular.element(document.getElementById('idForJS')).scope();
    scope.javaScriptCallAngular(value);
    // 手动触发脏检查，同步视图
    scope.$apply();
}

方案2：将scope属性修改逻辑包在$apply回调中 #

这种方式更稳妥，可以避免重复触发脏检查的报错，直接修改控制器内的方法即可：

serviceModule.controller('javaScriptController', function($scope) {
    $scope.javaScriptCallAngular = function(value) {
        $scope.$apply(() => {
            $scope.usersName = value;
        });
    };
}); 

两种方案任选其一即可解决页面绑定不更新的问题。

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