Question

我正在尝试使用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];
}

非常感谢你！

Answer 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 ”的部分）：

模型突变

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

另请参阅此 short demo 。

Angularjs：为什么我需要点击按钮才能更新我的视图？

1 个答案: