处理角控制器中异步更新的正确方法
Proper Way to Handle Asynchronous Updates in Angular Controller
这是我的设置——我有一个控制器,它使用一个服务来完成一些工作,然后异步返回数据。在这种情况下,数据是通过超时返回的,但在现实生活中,这会做一些更有趣的事情:
视图:
<div ng-controller="RootController as root">
<h1>Angular Project</h1>
<div ng-show="{{root.greeting}}">
<p>{{root.greeting}}</p>
</div>
</div>
控制器:
(function(){
'use strict';
function RootController(greetingService) {
var vm = this;
vm.greeting = '';
// startup logic
activate();
function activate() {
greetingService.greeting().then(
function( response ) {
vm.greeting = response;
},
function( error ) {
vm.greeting = error;
}
);
}
}
RootController.$inject = ['greeting'];
angular.module('app.core').controller('RootController', RootController);
})();
服务:
(function() {
'use strict';
// Greeting Service
function greeting( $timeout ) {
// public API
var service = {
greeting: greeting
};
return service;
// internal functions
function greeting() {
return $timeout( function() {
return 'Hello world!';
}, 1000 );
}
}
temp.$inject = ['$timeout'];
angular.module('app.core').factory( 'greeting', greeting );
})();
问题:
为什么当超时解决并且vm.greeting分配发生在我的控制器中时,我的视图没有更新?我见过有人描述"在Angular内部vs在Angular外部",但在我看来,我在这里并没有"在Anglar外部"。
我知道我可以调用$scope$apply(),但我遇到了"摘要已经在进行中"的错误,而且我似乎不应该这样做。
有没有更好的方法来组织我的组件?我还尝试过通过$rootScope广播事件,并在Controller中编写事件处理程序,但这种安排显示出相同的结果(即,当异步模型更改发生时,视图不会更新)。
ng show 不需要大括号
https://docs.angularjs.org/api/ng/directive/ngShow
更改
<div ng-show="{{root.greeting}}">
至
<div ng-show="root.greeting">
您构建代码的方式与我通常所做的非常不同。查看此链接可以获得很棒的风格指南。http://toddmotto.com/opinionated-angular-js-styleguide-for-teams/
至于您的问题,Angular使用$scope将控制器中的值绑定到视图。因此,您的控制器应该注入$scope,然后您可以用$scope.greeting代替vm.greeting.
相关文章:
- 有条件更新d3.js力图中节点的最佳方法
- Es6:能够在设置/更新/删除对象属性时调用自定义方法
- 主干:视图's的呈现方法被调用,但DOM未更新
- Bookshelf.js,在fetchAll()方法之后更新
- AngularJs在调用服务方法后更新指令
- 如何在jQuery的.on()方法中动态更新按钮的ID选择器
- Javascript 对象方法不更新变量
- 更新纹理的正确方法(三.JS)
- 如何从弹簧控制器方法更新html img src
- 通过两种方法创建和更新 CSS
- Ruby on rails-更新ajax的PUT方法
- 无法更新componentWillReceiveProps方法内的状态
- 在Sails/Waterline项目中,使用更新方法增加数据库值
- ReactJS 从父组件的 onClick 方法更新对子组件的 ajax 调用
- 如何使用在构造函数中创建的方法更新同一构造函数中的另一个变量
- 使用$http POST方法更新textarea
- 使用Angular Meteor的服务器方法更新Meteor客户端对象
- KnockoutJS - UI不使用内置的observableArray方法更新,除了push和pop
- 如何通过jQuery使用replace方法更新文本区域
- 使用backbone's set方法更新变量属性