Angularjs：为什么我需要点击一个按钮来更新我的视图？答案

【问题标题】：Angularjs : Why I need to click on a button to get my view updated?Angularjs：为什么我需要点击一个按钮来更新我的视图？
【发布时间】：2013-11-02 00:54:56
【问题描述】：

我正在尝试使用 angularjs 开发一个 chrome 扩展，当我尝试使用活动选项卡的 url 初始化 $scope 时出现奇怪的行为。

这里是我的控制器的代码：

var app = angular.module('app', ['app.service']);

app.controller('ItemCtrl', function ($scope, chromeHelper) {

    $scope.website = "No result!";

    // Does not work until I click on something :-/
    chromeHelper.getActiveTabDomain(function (domain) {$scope.website = domain; });

});

因此，当我尝试直接初始化 $scope.website 成员时，它不会成功，但是当我点击按钮之后，$scope.website 就会更新。

我真的不明白为什么。

这是我的 Chromehelper 服务的代码：

var service = angular.module('app.service', []);

service.factory('chromeHelper', function() {
    var chromeHelper = {};

    chromeHelper.getActiveTabDomain = function (callback){
            chrome.tabs.query({'active': true}, function(tabs){
                if(tabs && tabs.length > 0) callback(getDomainFrom(tabs[0].url));
            });
        };

    return chromeHelper;
});

function getDomainFrom(url) {
    return url.match(/:\/\/(.[^/]+)/)[1];
}

非常感谢您！

【问题讨论】：

好的，我通过在回调结束时调用 $scope.$apply() 来解决我的问题。
更简洁的方法是这样做：$scope.$apply(function(){$scope.selectedItem.website = domain});

标签： angularjs google-chrome-extension

【解决方案1】：

OP 通过在回调末尾添加$scope.$apply() 解决了这个问题（见上面的评论）：

// Does not work until I click on something :-/
chromeHelper.getActiveTabDomain(function(domain) {
    $scope.website = domain;
    $scope.$apply();    // <-- adding this line did the trick
});

对于任何登陆此页面并遇到类似问题的人的简短说明：

来自AngularJS docs on 'scope'（更具体地说，来自标题为“Scope Life Cycle”的部分）：

模型变异

为了正确观察突变，您应该只在 scope.$apply() 内进行突变。（Angular API 会隐式执行此操作，因此在控制器中进行同步工作或使用 $http 或 $timeout 服务进行异步工作时不需要额外的 $apply 调用。

另请参阅此short demo。

【讨论】：