编辑：此问题已解决

Question

编辑：此问题已解决

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

这是一个很长的搜索，为什么它会在测试时在浏览器中显示列表，但不会在模拟器中显示。显然，python附带的simpleHttpServer会处理以/作为它的根开头的url，例如www文件夹。模拟器不会并且会欣赏相对位置，从no /

开始

问题似乎主要是由我的网络开发技能的生锈造成的。^。^

====================

我正在尝试创建一个简单的离子应用程序，对于某些输入，我使用的是Angular Tutorial。

我有一个非常简单的页面，应该加载带有图像数据的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
    }
]

因为我几乎使用相同的代码作为角度示例，我希望这可以工作，不幸的是我在ios模拟器中运行时获得的所有输出都是带有标题栏的空白页面。没有错误或没有。谁能告诉我这里我做错了什么？

Result in iOS emulator

Answer 1

您在控制器中缺少一些console.log（数据）来检查控制器是否已初始化，http $ $实际上是否成功等。即使在使用角度数月后，我也必须记录每一步，因为有太多事情要出错：）

此外，您应该将错误功能添加到

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

无法让ng-controller在离子应用程序中工作

编辑：此问题已解决

1 个答案: