我正在创建一个个人网站,希望能够在不必操作
HTML
的情况下不断更新内容。我试着通过加载和更新一个 JSON
文件来实现这一目标。但是目前,我无法将 JSON
数据加载到一个 scope
变量中。
< p>HTML<!doctype html>
<html>
<head>
<script src="angular.min.js" type="text/javascript"></script>
<script src="maincontroller.js" type="text/javascript"></script>
</head>
<body>
<div ng-app="mainApp" ng-controller="mainController">
<div id="content">
<div ng-repeat="content in contents">
<h2>{{content.heading}}</h2>
<p>{{content.description}}</h2>
</div>
</div>
</div>
</body>
</html>
主控制器maincontroller.js
var myapp = angular.module('mainApp', []);
myapp.controller('mainController',function($scope,$http){
$scope.contents = null;
$http.get('mainContent.json')
.success(function(data) {
$scope.contents=data;
})
.error(function(data,status,error,config){
$scope.contents = [{heading:"Error",description:"Could not load json data"}];
});
//$scope.contents = [{heading:"Content heading", description:"The actual content"}];
//Just a placeholder. All web content will be in this format
});
这就是JSON
文件的样子
[
{"heading":"MyHeading","description":"myDescription"},
]
我实际上尝试按照这里给出的解决方案,但它没有加载存储在同一文件夹中的JSON
文件。 我得到的输出来自错误处理函数,它显示了Error: Cannot load JSON data
。
我做错了什么?
编辑:我将相同的代码放在plunker上,它可以正常工作。 它只是在我的本地机器上无法工作。