Не могу заставить ng-контроллер работать в ионном приложении

0

edit: Эти вопросы решены

Достаточно глупо, url/img/images.json обрабатывается по-разному простым HTTP-сервером, используемым для тестирования приложения, чем симулятором iOS.

Это был длинный поиск, почему он показывал список в браузере при тестировании, но не в симуляторе. По-видимому, простойHttpServer, который поставляется с python, будет обрабатывать URL-адрес, начинающийся с/как его root, например, в папке www. Симулятор не хочет и будет оценивать относительное местоположение, начиная с отсутствия /

Проблема в основном вызвана ржавкой моих навыков веб-разработчиков ^. ^

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

Я пытаюсь сделать простое ионное приложение, и для некоторого ввода я использую Angular Tutorial.

У меня очень простая страница, которая должна загружать содержимое json файла с данными изображения. И все, что ему нужно сделать, покажет имена изображений. В конце он должен выгрузить полные данные из json файла.

Все это основано на пустом проекте, созданном с ионной.

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 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 Simulator, - это пустая страница с заголовком. Нет ошибок или ничего. Может ли кто-нибудь сказать мне, что я делаю неправильно здесь?

Изображение 174551

  • 0
    Я смотрел на это некоторое время, и я ничего не вижу. Возможно ли, что некоторые файлы не удалось загрузить?
  • 1
    Если angular не интерполирует выражения {{imagelist | json}} , обычно это потому, что angular не удалось загрузить, часто из-за отсутствия зависимостей или синтаксической ошибки в объявлениях модуля.
Показать ещё 2 комментария
Теги:
ionic-framework

1 ответ

3
Лучший ответ

Вам не хватает некоторых console.log (данных) в вашем контроллере, чтобы проверить, инициализирован ли контроллер, может ли он называться "http://http на самом деле" и т.д. Даже после использования угловых в течение нескольких месяцев я должен регистрировать каждый шаг, потому что слишком много вещей, чтобы пойти не так :)

Также вы должны добавить функцию ошибки для

$http.get('/img/images.json').success(function(data) {
  $scope.imagelist = data;
}).error(function(data) ....;
Поделиться
  • 0
    Это действительно указало мне правильное направление ^. ^ Я полагаю, вы получили 50 за помощь в завершении 4-дневного поиска

Ещё вопросы

Сообщество Overcoder
Наверх
Меню