我想developpe一个Chrome扩展与angularjs,我有一个奇怪的现象,当我尝试用活动标签的URL来初始化$范围。
I'm trying to developpe a chrome extension with angularjs and I have a strange behaviour when I try to initialize the $scope with the url of the active tab.
下面我控制器code:
Here the code of my controller:
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成员没有成功,但是当我点击按钮aftewards $ scope.website然后更新。
So when I try to initialize directly the $scope.website member it doesn't succeed but when I click on the button aftewards $scope.website then updates.
我真的不明白为什么。
下面是我Chromehelper服务的code:
Here is the code of my Chromehelper service:
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];
}
非常感谢你提前!
Thank you very much in advance!
推荐答案
OP的解决了这个问题(见注释以上)加入 $范围。$适用()
在回调的末尾:
The OP solved the problem (see comment above) by adding $scope.$apply()
at the end of the callback:
// Does not work until I click on something :-/
chromeHelper.getActiveTabDomain(function(domain) {
$scope.website = domain;
$scope.$apply(); // <-- adding this line did the trick
});
任何人登陆这个页面上有类似问题的简短说明:
A short explanation for anyone landing on this page with a similar problem:
从对范围中的 AngularJS文档 (更具体从标题为 范围生命周期 ')
From the AngularJS docs on 'scope' (more specifically from the section titled 'Scope Life Cycle'):
型号突变
为了正确观察突变,你应该只范围内使它们。$适用()。 (角的API做到这一点含蓄,所以不需要额外的$应用呼叫控制器做同步工作的时候,或异步工作$ http或$超时服务。
For mutations to be properly observed, you should make them only within the scope.$apply(). (Angular APIs do this implicitly, so no extra $apply call is needed when doing synchronous work in controllers, or asynchronous work with $http or $timeout services.
又见这个 短演示
See, also, this short demo.
相关推荐
最新文章