更新 angular 事件范围
Update angular scope on events
我正在将 Web 服务客户端包装到 angular 服务中。这个特定的客户端会像这样为特定的更新发送事件:
app.service('AngularClient', function () {
this.info = null
this.login = function () {
client.login(loginInfo).then(function (loggedClient) {
loggedClient.on('newInfo', function (info) {
this.info = info
})
})
}
})
控制器使用此服务并将其绑定到其 $scope
:
app.controller('Ctrl', function (AngularClient, $scope) {
$scope.client = AngularClient
})
但是,任何时候触发 'newInfo'
事件 angular 都不会自动触发 digest
循环,所以我无法控制 info
何时更新在 UI。 angular 确保这种情况每次都发生的方法是什么?
如果您想继续接收登录事件的更新,您可以这样做:
app.service('AngularClient', function () {
this.info = null
this.loginCallback = null
this.login = function () {
client.login(loginInfo).then(function (loggedClient) {
loggedClient.on('newInfo', function (info) {
this.info = info
if (this.loginCallback) this.loginCallback(info);
})
})
}
})
app.controller('Ctrl', function (AngularClient, $scope) {
$scope.client = AngularClient
AngularClient.loginCallback = function(info, err){ // optional error
$scope.user.property = info.property;
$scope.$apply();
}
})
Angular 如果使用您的代码创建的自定义异步方法,将不会意识到它应该再次消化。
解决这个问题的一种方法是使用 $scope.$apply()
。但是 $scope 不会暴露给您的服务。所以在你的 angular 控制器上,你可以将事件的监听函数包装到 $apply()
;
$scope.$apply(function () {
//your code here.
});
我正在将 Web 服务客户端包装到 angular 服务中。这个特定的客户端会像这样为特定的更新发送事件:
app.service('AngularClient', function () {
this.info = null
this.login = function () {
client.login(loginInfo).then(function (loggedClient) {
loggedClient.on('newInfo', function (info) {
this.info = info
})
})
}
})
控制器使用此服务并将其绑定到其 $scope
:
app.controller('Ctrl', function (AngularClient, $scope) {
$scope.client = AngularClient
})
但是,任何时候触发 'newInfo'
事件 angular 都不会自动触发 digest
循环,所以我无法控制 info
何时更新在 UI。 angular 确保这种情况每次都发生的方法是什么?
如果您想继续接收登录事件的更新,您可以这样做:
app.service('AngularClient', function () {
this.info = null
this.loginCallback = null
this.login = function () {
client.login(loginInfo).then(function (loggedClient) {
loggedClient.on('newInfo', function (info) {
this.info = info
if (this.loginCallback) this.loginCallback(info);
})
})
}
})
app.controller('Ctrl', function (AngularClient, $scope) {
$scope.client = AngularClient
AngularClient.loginCallback = function(info, err){ // optional error
$scope.user.property = info.property;
$scope.$apply();
}
})
Angular 如果使用您的代码创建的自定义异步方法,将不会意识到它应该再次消化。
解决这个问题的一种方法是使用 $scope.$apply()
。但是 $scope 不会暴露给您的服务。所以在你的 angular 控制器上,你可以将事件的监听函数包装到 $apply()
;
$scope.$apply(function () {
//your code here.
});