无法让 ng-controller 在离子应用程序中工作
Posted
技术标签:
【中文标题】无法让 ng-controller 在离子应用程序中工作【英文标题】：Can't get ng-controller to work in ionic app 【发布时间】：2014-05-25 09:10:01 【问题描述】：编辑：这个问题解决了
够愚蠢的是，用于测试应用程序的 simpleHttpServer 对待 url /img/images.json 的方式与 ios 模拟器不同。
这是一个漫长的搜索，为什么它会在测试时在浏览器中显示列表而不是在模拟器中。显然，python 附带的 simpleHttpServer 会将以 / 开头的 url 视为根目录，例如 www 文件夹。模拟器不会并且会欣赏相对位置，以 no / 开头
这个问题似乎主要是由于我的网络开发技能生疏^.^
=====================
我正在尝试制作一个简单的 ionic 应用程序，对于一些输入，我正在使用 Angular 教程。
我有一个非常简单的页面，它应该加载带有图像数据的 json 文件的内容。它现在需要做的就是显示图像名称。最后它应该从 json 文件中转储完整的数据。
这都是基于 ionic 创建的空白项目。
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
</head>
<body ng-app="phocalsApp">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content ng-controller="imageListCtl">
<ul class="imagelist">
<li ng-repeat="image in imagelist" >
image.imgName
</li>
</ul>
imagelist | json
</ion-content>
</ion-pane>
</body>
</html>
app.js：
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('phocalsApp', ['ionic', 'phocalsControllers'])
.run(function($ionicPlatform)
$ionicPlatform.ready(function()
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
if(window.StatusBar)
StatusBar.styleDefault();
);
)
controller.js
'use strict';
var phocalsControllers = angular.module('phocalsControllers', []);
phocalsControllers.controller('imageListCtl', ['$scope', '$http',
function($scope, $http)
$http.get('/img/images.json').success(function(data)
$scope.imagelist = data;
);
$scope.orderProp = 'imgDate';
]);
images.json:
[
"imgUrl":"",
"imgName":"Nieuwste Foto",
"imgDate":20140525
,
"imgUrl":"",
"imgName":"tweede Foto",
"imgDate":20140524
,
"imgUrl":"",
"imgName":"derde Foto",
"imgDate":20140523
]
看到我几乎使用与 Angular 示例相同的代码，我希望它能够工作，不幸的是，我在 ios 模拟器中运行时得到的所有输出都是带有标题栏的空页面。没有错误或什么都没有。谁能告诉我我在这里做错了什么？
【问题讨论】：
我盯着这个看了一会儿，什么都看不到。是不是有些文件下载失败？ 如果 Angular 没有插入表达式imagelist | json，这通常是因为 Angular 无法引导，通常是由于缺少依赖项或模块声明中的语法错误。
@starchild 基于帖子中显示的代码，我需要在哪里查看任何想法？这是我所有的代码，所以如果有语法错误，它应该在那里。
愚蠢的是，用于测试应用程序的 simpleHttpServer 对待 URL /img/images.json 的方式与 iOS 模拟器不同。这是一个漫长的搜索，为什么它会在测试时在浏览器中显示列表而不是在模拟器中。显然，python 附带的 simpleHttpServer 会将以 / 开头的 url 视为根目录，例如 www 文件夹。模拟器没有并且会欣赏相对位置，从 no / 开始问题似乎主要是由于我的网络开发技能生锈^.^
【参考方案1】：
您的控制器中缺少一些 console.log(data) 来检查控制器是否已初始化，$http 是否实际成功等。 即使在使用 Angular 几个月后，我也必须记录每一步，因为有太多事情出错了 :)
你也应该添加一个错误函数
$http.get('/img/images.json').success(function(data)
$scope.imagelist = data;
).error(function(data) ....;
【讨论】：
这确实为我指明了正确的方向 ^.^ 我猜你已经为结束这 4 天的搜索赢得了 50 分以上是关于无法让 ng-controller 在离子应用程序中工作的主要内容，如果未能解决你的问题，请参考以下文章