AngularJS：使用控制器和 ng-repeat 在 div 上重新加载数据
Posted
技术标签:
【中文标题】AngularJS：使用控制器和 ng-repeat 在 div 上重新加载数据【英文标题】：AngularJS: Reload data on div with controller and ng-repeat 【发布时间】：2015-08-18 16:56:39 【问题描述】：我是 Angular JS 的新手，正在学习它。我有一个 div 并在控制器启动时使用以下代码从 json 加载数据，但我想在执行特定操作后 json 对象更改时再次重新加载它。
index.html
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html ng-app="ezpf" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="lib/angular.js"></script>
<script src="lib/jquery.min.js"></script>
</head>
<body onload="EZPF.Application.initialize()">
<div id="btn-import" class="my-button button-small" onClick="EZPF.Application.openFile(this)">
<span class="button-title">Import</span>
<span class="button-help">This button will do something else.</span>
</div>
<div class="page" id="pro" ng-controller="ProductsListCtrl as store">
<div ng-repeat="product in store.products.Products">
product.Title
</div>
</div>
</body>
</html>
myAngular.js
(function()
var app = angular.module('ezpf', []);
app.controller('ProductsListCtrl',['$scope', function($scope)
this.products = EZPF.Application.getProducts();
$scope.reload = function()
$scope.products = EZPF.Application.getProducts();
;
]);
)();
在下面的 javascript 文件中，我打开 JSON 文件并使用新数据重新加载产品对象。用新的 JSON 文件内容更新后，我必须重新加载数据。我试图从控制器调用重新加载，但它不起作用。请帮助我，提前谢谢。
应用程序.js
var EZPF;
if (!EZPF)
EZPF = ;
if (!EZPF.Application)
EZPF.Application = ;
EZPF.Application =
products: [],
getProducts: function()
if (this.products.length == 0)
this.products =
"Products": [
"Title": "default name"
....
]
return this.products;
,
openFile: function()
var docsDir = air.File.documentsDirectory;
try
var jsonFilter = new air.FileFilter("JSON Files", "*.json");
docsDir.browseForOpenMultiple("Select JSON Files", [jsonFilter]);
docsDir.addEventListener(air.FileListEvent.SELECT_MULTIPLE, filesSelected);
catch (error)
air.trace("Failed:", error.message)
function filesSelected(event)
air.trace(event.files[0].nativePath);
var myFile = new window.runtime.flash.filesystem.File();
var file = myFile.resolvePath(event.files[0].nativePath);
var fileStream = new air.FileStream();
fileStream.open(file, air.FileMode.READ);
this.products = fileStream.readMultiByte(fileStream.bytesAvailable, air.File.systemCharset);
fileStream.close();
air.trace(products);
$('#pro').reload();
;
【问题讨论】：
EZPF.Application.getProducts() 是否返回了一些东西，$scope.products 是否更新了？
@Zee EZPF.Application.getProducts() 返回具有新值的相同 JSON，但我不知道如何调用填充 product.Title 的 div 控制器
在那一行写$scope.$apply()之后，你的div就会更新。
@Zee 它不起作用，有没有其他方法可以从 javascript 调用控制器内部的 reload 方法？
你能做一个小提琴吗？
【参考方案1】：
您使用的是controller as (ng-controller="ProductsListCtrl as store") 语法，因此您必须将变量分配给控制器本身 (this) 而不是$scope：
var vm = this;
vm.products = EZPF.Application.getProducts();
vm.reload = function()
vm.products = EZPF.Application.getProducts();
;
要重新加载数据：
<div class="page" id="pro" ng-controller="ProductsListCtrl as store">
<div ng-repeat="product in store.products.Products">
product.Title
</div>
<!-- Button for reloading the data -->
<button ng-click="store.reload()">Reload Data</button>
</div>
JSFIDDLE
【讨论】：
你是对的，但我的问题是更新 JSON 后如何从 javascript 调用reload() 方法？
我添加了重新加载数据按钮但没有刷新数据:-(
是AngularJS和JS通讯故障吗？如果我再次将新的硬编码 JSON 放入 reload() 中，则刷新有效，但无法调用 getProducts() 方法
你能告诉我如何从 JavaScript 而不是重新加载按钮以编程方式调用reload() 吗？
从控制器中你可以做vm.reload()以上是关于AngularJS：使用控制器和 ng-repeat 在 div 上重新加载数据的主要内容，如果未能解决你的问题，请参考以下文章