gpt4 book ai didi

ios - 无法让 ng-controller 在 ionic 应用程序中工作

转载 作者:行者123 更新时间:2023-11-28 20:01:30 25 4
gpt4 key购买 nike

编辑:这个问题已解决

愚蠢的是,用于测试应用程序的 simpleHttpServer 与 iOS 模拟器对 url/img/images.json 的处理方式不同。

为什么在测试时会在浏览器中显示列表而不是在模拟器中显示列表,这是一个漫长的搜索。显然,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>

应用程序.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';
}]);

图像.json:

[
{
"imgUrl":"",
"imgName":"Nieuwste Foto",
"imgDate":20140525
},
{
"imgUrl":"",
"imgName":"tweede Foto",
"imgDate":20140524
},
{
"imgUrl":"",
"imgName":"derde Foto",
"imgDate":20140523
}
]

看到我几乎使用与 Angular 示例相同的代码,我希望它能工作,不幸的是,我在 ios 模拟器中运行时得到的所有输出都是带有标题栏的空页面。没有错误或什么都没有。谁能告诉我我在这里做错了什么?

Result in iOS emulator

最佳答案

您在 Controller 中缺少一些 console.log(data) 来检查 Controller 是否已初始化,$http 是否真的成功等。即使在使用 angular 几个月之后,我也必须记录每一步,因为有太多地方可能出错 :)

你还应该添加一个错误函数

$http.get('/img/images.json').success(function(data) {
$scope.imagelist = data;
}).error(function(data) ....;

关于ios - 无法让 ng-controller 在 ionic 应用程序中工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23853710/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com