个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
25
4
一个常见的场景，我有一个 ng-repeat 中显示的项目集合。对于显示的每一行，我都有一个启动过程(文件上传)的按钮和一个状态字段。我希望我的 UI 能够在流程状态发生变化时反射(reflect)出来。这在带有双向绑定(bind)的 Angular 中应该很容易，对吧？
我在 ng-repeat 上创建了第二个(子) Controller ，这样我就可以简单地更新它自己范围内的项目状态，而不是处理项目集合，特别是因为这个过程是异步的，用户会可能同时上传许多文件。
问题:我对 Ang/JS 中的 $scope 缺乏理解 - 哈哈。但严重的是，当作用域模型值更新时，UI 中的绑定(bind) {{xxx}} 值不会更新。单击任一按钮并查看警报。如何让 UI 正确更新？
仅供引用 - 实际上，该按钮调用外部库上的 API 来上传文件并返回给我一个 url 以检查我的上传状态。然后我在 setInterval() 循环中轮询 url 以 ping 状态直到完成或错误。我在 Plunkr 中简化了该部分，因为这种复杂性本身并不是问题所在。 Plunkr
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.7/angular.js" data-semver="1.2.7"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<table>
<th></th>
<th>Id</th>
<th>Name</th>
<th>Status</th>
<tr ng-repeat="item in items" ng-controller="ChildCtrl">
<td><button ng-click="updateStatus(item)">click</button></td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.status}}</td>
</tr>
</table>
</body>
</html>
JS
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [ {id: 1, name: "Moe", status: "init"}
, {id: 3, name: "Larry", status: "init"}
, {id: 2, name: "Curly", status: "init"}
];
});
app.controller('ChildCtrl', function($scope) {
$scope.updateStatus = function(item){
$scope.myItem = item;
alert('child: ' + item.id + ' status: ' + item.status);
item.status = 'clicked';
alert('status just update in UI to: ' + item.status);
callResult = fakeAjaxCall($scope);
alert('callResult: ' + callResult);
};
var fakeAjaxCall = function(scope){
setTimeout(function (item) {
if (-1 == -1) { //success
result = "Wow, it worked!";
alert('current status: ' + scope.myItem.status);
alert('ajax result: ' + result);
scope.myItem.status = result;
alert('new status: ' + scope.myItem.status);
alert("but the status in the UI didn't update");
}
}, 2000);
};
});
最佳答案
您需要使用 $timeout而不是 setTimeout 从更新模式的 Angular 内调用摘要循环，或者您必须自己调用摘要循环(通过包装代码 scope.$apply()，scope.evalAsync etc...) ，原因是 Angular 不知道 setTimeout 何时完成，因为它不会在 Angular 内发生。当你 Angular 方式做事并且你可以自由使用它时，你应该尽量不要手动调用摘要循环。在这种情况下，您可以将 setTimeout 替换为 $timeout 并且模型更改将自动反射(reflect)在 View 中，因为当 $timeout 完成了。还有一个优点是，当使用 $timeout 时，它也会返回一个 promise，您可以将其链接起来，并且在与 setTimeout 相对时仍然实现了 promise 模式。
app.controller('ChildCtrl', function($scope, $timeout) {
$scope.updateStatus = function(item){
$scope.myItem = item;
console.log('child: ' + item.id + ' status: ' + item.status);
item.status = 'clicked';
console.log('status now updates in UI to: ' + item.status);
callResult = fakeAjaxCall($scope);
console.log('callResult: ' + callResult);
};
var fakeAjaxCall = function(scope){
$timeout(function (item) {
if (-1 == -1) { //success
result = "Wow, it worked!";
console.log('current status: ' + scope.myItem.status);
console.log('ajax result: ' + result);
scope.myItem.status = result;
console.log('new status: ' + scope.myItem.status);
console.log("but the status in the UI doesn't update");
}
}, 2000);
};
在调试异步操作时，我建议使用 console.log(或 $log)而不是 alert 进行调试。
关于javascript - AngularJs - UI 中的字段未反射(reflect)更新的模型值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25233932/
25
4
0
可不可以命名为MVVM模型？因为View通过查看模型数据。 View 是否应该只与 ViewModelData 交互？我确实在某处读到正确的 MVVM 模型应该在 ViewModel 而不是 Mode
我正在阅读有关设计模式的文章，虽然作者们都认为观察者模式很酷，但在设计方面，每个人都在谈论 MVC。 我有点困惑，MVC 图不是循环的，代码流具有闭合拓扑不是很自然吗？为什么没有人谈论这种模式: mo
我正在开发一个 Sticky Notes 项目并在 WPF 中做 UI，显然将 MVVM 作为我的架构设计选择。我正在重新考虑我的模型、 View 和 View 模型应该是什么。 我有一个名为 Not
不要混淆:How can I convert List to Hashtable in C#? 我有一个模型列表，我想将它们组织成一个哈希表，以枚举作为键，模型列表(具有枚举的值)作为值。 publi
我只是花了一些时间阅读这些术语(我不经常使用它们，因为我们没有任何 MVC 应用程序，我通常只说“模型”)，但我觉得根据上下文，这些意味着不同的东西: 实体 这很简单，它是数据库中的一行: 2) In
我想知道你们中是否有人知道一些很好的教程来解释大型应用程序的 MVVM。我发现关于 MVVM 的每个教程都只是基础知识解释(如何实现模型、 View 模型和 View )，但我对在应用程序页面之间传递
我想realm.delete() 我的 Realm 中除了一个模型之外的所有模型。有什么办法可以不列出所有这些吗？ 也许是一种遍历 Realm 中当前存在的所有类型的方法？ 最佳答案 您可以从您的 R
我正在尝试使用 alias 指令模拟一个 Eloquent 模型，如下所示: $transporter = \Mockery::mock('alias:' . Transporter::class)
我正在使用 stargazer 创建我的 plm 汇总表。 library(plm) library(pglm) data("Unions", package = "pglm") anb1 <- pl
我读了几篇与 ASP.NET 分层架构相关的文章和问题，但是读得太多后我有点困惑。 UI 层是在 ASP.NET MVC 中开发的，对于数据访问，我在项目中使用 EF。 我想通过一个例子来描述我的问题
我收到此消息错误: Inceptionv3.mlmodel: unable to read document 我下载了最新版本的 xcode。 9.4 版测试版 (9Q1004a) 最佳答案 您没有
(同样，一个 MVC 验证问题。我知道，我知道......) 我想使用 AutoMapper ( http://automapper.codeplex.com/ ) 来验证我的创建 View 中不在我
需要澄清一件事，现在我正在处理一个流程，其中我有两个 View 模型，一个依赖于另一个 View 模型，为了处理这件事，我尝试在我的基本 Activity 中注入(inject)两个 View 模型，
如果 WPF MVVM 应该没有代码，为什么在使用 ICommand 时，是否需要在 Window.xaml.cs 代码中实例化 DataContext 属性？我已经并排观看并关注了 YouTube
当我第一次听说 ASP.NET MVC 时，我认为这意味着应用程序由三个部分组成:模型、 View 和 Controller 。 然后我读到 NerdDinner并学习了存储库和 View 模型的方法
Platform : ubuntu 16.04 Python version: 3.5.2 mmdnn version : 0.2.5 Source framework with version :
我正在学习本教程:https://www.raywenderlich.com/160728/object-oriented-programming-swift ...并尝试对代码进行一些个人调整，看看
我正试图围绕 AngularJS。我很喜欢它，但一个核心概念似乎在逃避我——模型在哪里？ 例如，如果我有一个显示多个交易列表的应用程序。一个列表向服务器查询匹配某些条件的分页事务集，另一个列表使用不同
我在为某个应用程序找出最佳方法时遇到了麻烦。我不太习惯取代旧 TLA(三层架构)的新架构，所以这就是我的来源。 在为我的应用程序(POCO 类，对吧？？)设计模型和 DAL 时，我有以下疑问: 我的模
我有两个模型:Person 和 Department。每个人可以在一个部门工作。部门可以由多人管理。我不确定如何在 Django 模型中构建这种关系。 这是我不成功的尝试之一 [models.py]:
我是一名优秀的程序员,十分优秀！