如何强制角度绑定更新视图

时间:2017-04-16 05:01:02

标签: angularjs data-binding

我在我的html中添加了一个“加载任务”,所以当我要进入一些慢速路径或从远程加载一些数据时我可以更新一些{{loading_task}},这样我就可以让用户界面更多地了解一下当前的任务是在系统中。

在我的控制器中,我只是用字符串更新$rootScope.loading_task以实现此目的。

在我的HTML中,我只是

<h3 ng-model="loading_task">{{loading_task}}</h3>

说我有几条消息:

1. loading
2. configuring
3. calculating

当我ctrl + f5页面时,我可以看到消息只在加载到配置时更新一次。配置是在回调中从远程加载一个大的JS文件。所以它有效。虽然计算正在做很多DOM事件触发。这基本上似乎根本不起作用。我想它可能只是阻止了整个网页渲染序列。

当我不是新页面时,只是正常探索路线,加载消息根本不会更新。总是,第一条消息是“加载”。

做这种事的正确方法是什么?

1 个答案:

答案 0 :(得分:0)

你犯了一些错误

1,不要将ReactDOM.render( <Router history={browserHistory}> <Route path="/" component={App}> <Route path="login" component={Login}> <IndexRoute component={LoginForm}/> <Route path="twofactor" component={twoFactor}/> <Route path="backupcode" component={backupCode}/> </Route> <Route path="register" component={Register} onEnter={auth.auth_disallow}/> <Route path="admin" onEnter={auth.required} component={Admin}> <Route path="dashboard" component={Dashboard}> <IndexRoute component={DashboardIndex}/> </Route> <Route path="settings" component={Settings}> <IndexRoute component={SettingsIndex}/> <Route path="changepassword" component={ChangePassword}/> <Route path="editinfo" component={EditInfo}/> </Route> <Route path="/logout" onEnter={auth.logout}/> </Route> <Route path='*' component={NotFound}/> </Route> </Router>, document.getElementById('app') ); ng-model元素

一起使用
<h3>

始终记住,<h3 ng-model="loading_task">{{loading_task}}</h3> 适用于ng-modelcheckbox等输入标记。

2,避免使用radio在大型应用程序中存储变量,因为在大型应用程序中$rootscope不是一个好的解决方案,创建工厂并为其维护一个对象。

因此,不要使用$rootscope创建工厂并使用它来保持加载。