我在角度js中有一个基本项目,有这个文件
的index.html
<div class="portfolio" ng-controller="portfolio-controller">
<h3>Latest Works</h3>
<div class="col-md-6" ng-repeat="prt in portlist">
<div class="box-portfolio">
<div class="ps">
<div class="lp"><a href="#/{{ prt.id }}"><i class="fa fa-chevron-down"></i></a></div>
</div>
<div class="box-descrip">
<h4>{{prt.title}}</h4>
<p>{{ prt.id }}</p>
<p>{{prt.descrip}}</p>
</div>
<div class="back-sw"></div>
<img ng-src="images/misc/{{prt.img}}" alt="">
</div>
</div>
</div>
controler.js -
var AppStart = angular.module('apps', ['ngRoute'])
AppStart.controller('portfolio-controller', function ($scope, $http){
$http.get('app/portfolio.json').success(function(data) {
$scope.portlist = data;
});
});
portfolio.json -
[
{
id: "project_1",
title: "project1",
img: "work1.jpg",
descrip: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam earu"
},
{
id: "project_2",
title: "project2",
img: "work2.jpg",
descrip: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam earu"
},
{
id: "project_3",
title: "project3",
img: "work3.jpg",
descrip: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam earu"
},
{
id: "project_4",
title: "project4",
img: "work4.jpg",
descrip: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam earu"
},
{
id: "project_5",
title: "project5",
img: "work5.jpg",
descrip: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam earu"
},
{
id: "project_6",
title: "project6",
img: "work6.jpg",
descrip: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam earu"
}
问题是角度没有加载index.html中的json文件, 但是在controller.js中使用此代码可以正常工作
可选代码
AppStart.controller( 'portfolio-controller', ['$scope', function($scope){
$scope.portlist = [
{ id: "project_1", title: "project1", img: "work1.jpg", descrip: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam earu" },
{ id: "project_2", title: "project2", img: "work2.jpg", descrip: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam earu" },
{ id: "project_3", title: "project3", img: "work3.jpg", descrip: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam earu" },
{ id: "project_4", title: "project4", img: "work4.jpg", descrip: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam earu" },
{ id: "project_5", title: "project5", img: "work5.jpg", descrip: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam earu" },
{ id: "project_6", title: "project6", img: "work6.jpg", descrip: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam earu" }
]
}] )
我不知道发生了什么,我使用自耕农和gruntjs
答案 0 :(得分:0)
您在$ http电话中错误拼写了该文件的名称:
$http.get('app/ortfolio.json').success(function(data) {
应该是:
$http.get('app/portfolio.json').success(function(data) {
如果这只是您问题中的拼写错误,请修改您的问题并提供任何控制台日志消息/错误的输出,并确认您在Chrome / Firefox /等的“网络”标签中看到了正在发出的请求。