为什么这不绑定？答案

【问题标题】：Why does this not bind?为什么这不绑定？
【发布时间】：2015-09-08 23:47:14
【问题描述】：

我正在学习有关 Angular 的所有知识。我知道有很多关于 Angular 绑定的 SO 问题，但我仍在苦苦挣扎。也许有人可以通过这个例子让我更清楚。

        .controller('myCtrl',['$scope',function($scope){

            //define dummy usermanager "class" 
            var um = function(){
                this.username = 'myUsername';
            };

            //init dummy user class 
            var _um = new um();

            //Bind usermanager to scope 
            $scope.UserManager = _um;

            //After three seconds set new username 
            setTimeout(function(){
                console.log('set');
                _um.username = 'newUsername';
            },3000);
        }]);

使用基本模板

<p>{{ UserManager }}</p>

在本例中，它将始终读取 { username : myUsername } 并且永远不会更改为 { username : newUsername }

在这个例子中如何正确使用 Angulars 的双向绑定？

编辑： 看来我可以使用 $scope.$apply();但这似乎不是最好的方法。

【问题讨论】：

标签： angularjs binding

【解决方案1】：

正如其他人指出的那样，angular 不知道$scope 的变化。您应该使用 $timeout 代替它将您的函数包装在 $apply 中

$timeout(function() {
    console.log('set');
     _um.username = 'newUsername';
}, 3000);

【讨论】：

以上评论100%正确。当您使用 Angular 时，您需要使用 Angular 的包装服务 b/c 它将触发应用/摘要循环，这就是使双向绑定起作用的原因。这是所有角度服务的链接。 docs.angularjs.org/api/ng/service.
谢谢，我的问题应该更直接地说明我真正想要什么。我实际上是在处理 $http，但为了清楚起见，我试图简化这个问题。不过，您的回答确实帮助我更好地理解了循环。对于遇到此问题的其他人，您应该更多地扩展摘要周期 [尽管我知道它已经在 SO 的许多地方讨论过]

【解决方案2】：

$scope.UserManager 指向对象 _um。

当你说 _um.username = 'newUsername' 时，这将改变 _um 对象的属性值。如果在那之后你尝试 console.log($scope.UserManager.username) - 那将输出正常。

但是，当您说 _um.username = 'newUsername' 时，Angular 并不知道在某些情况下它会影响范围上的数据。因此它不会使用新的 $scope 值刷新 DOM。

您可以使用 $scope.$apply(); 调用它（建议不要）

您可以了解 AngularJS 中的观察者 - 这可能会有所帮助。

【讨论】：

【解决方案3】：

AngularJS 实际上在 $apply 调用中调用了几乎所有的代码。 ng-click、控制器初始化、$http 回调等事件都包含在 $scope.$apply() 中。所以你不需要自己调用它，事实上你不能。在 $apply 中调用 $apply 会抛出错误。

如果您要在新的回合中运行代码，则确实需要使用它。并且仅当该回合不是从 AngularJS 库中的方法创建时。

在新一轮中，您应该将代码包装在 $scope.$apply() 中。 setTimeout 将在延迟后在新的轮次中执行一个函数。由于 Angular 不知道那个新回合，因此不会反映更新。

所以你的解决方案是使用 $scope.$apply 是完全合适的。

            $scope.$apply(function(){
                _um.username = 'newUsername';
            })

【讨论】：