JSON ответ не отражается в виду?

0

Я называю webservice, который возвращает ответ JSON. Я хочу привязать эти данные json для просмотра с помощью ng-repeat. Я использую один и тот же контроллер для обоих экранов.

Вот как выглядит поток:

  • Я называю webservice и получаю json.
  • Я перехожу на другой экран, используя $ state.go('screen2')
  • Здесь я пытаюсь связать свой json с моим html.

Мой код:

angular.module('controller').controller('Ctrl1', function($scope, $state, $http) {
$scope.myList;
$scope.getUserList = function() {
        $http({
            method: 'GET',
            url: someurl,
        }).then(function(response) {
            //success
            if (response.data.status == "OK") { 
                    $scope.myList = response.data.data;
                    $state.go('screen2');
            }
        }, function(response) {
            alert('failed');
        });
    }

Мой вид (экран2):

<ion-view view-title="Select User">
  <ion-header-bar class="bar-user">
    <h1 class="title">Select User</h1>
  </ion-header-bar>
  <ion-content class="padding">
    <div class="mainWrap">
    <div class="text-title">
      Lorel ipsum
    </div>
    <div class="list user">
      <a class="item item-icon-left" href="#" ng-repeat="v in myList">
        <i class="icon ion-wifi"></i>
        {{v.name}}
      </a>
    </div>
  </ion-content>
</ion-view>

Когда я жестко задаю и присоединяю эти данные json непосредственно к области контроллера. Все работает нормально. Но когда я связываю тот же json в ответе $ http. Ничего не работает.

Ответ Webservice:

{
    "status": "OK",
    "data": [
        {
            "name": "lorel",
            "type": "off"
        },
        {
            "name": "edimax",
            "type": "on"
        },
        {
            "name": "ipsum",
            "type": "on"
        },
        {
            "name": "blah blah",
            "type": "on"
        }
    ]
}
Теги:
ionic-framework
angularjs-scope
angularjs-ng-repeat
ng-repeat

1 ответ

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

$scope.myList к одному контроллеру.
Каждый член $scope привязан к контроллеру, который должен быть привязан к представлению.

Я подозреваю, что вы используете один и тот же контроллер для двух разных видов; может быть, что-то вроде этого:

  $stateProvider

  .state('home', {
      url: '/home',
      templateUrl: 'home.html',
      controller: 'homeController',
  })

  .state('screen2', {
      url: '/screen2',
      templateUrl: 'screen2.html',
      controller: 'homeController',
  });

Это нехорошо. Всегда лучше иметь контроллер для просмотра.

Во всяком случае, поскольку вы хотите обмениваться данными, вам нужно использовать какой-то кеш. Вы можете использовать сервис.

Вы можете создать что-то вроде этого:

(function() {

  'use strict';

  angular
    .module('app.services', [])
    .factory('dataService', dataService);

  dataService.$inject = ['$q', '$http'];

  /* @ngInject */
  function dataService($q, $http) {

    var service = {
      myList: [],
      fetchData: fetchData
    };

    return (service);

    function fetchData() {

      // Do some sort of $http request and fill the list.

      var deferred = $q.defer();

      this.myList = [];

      this.myList.push({name: 'AAA'});
      this.myList.push({name: 'BBB'});
      this.myList.push({name: 'CCC'});

      deferred.resolve(this.myList);

      return deferred.promise;

    }

  }

})();

Эта служба имеет коллекцию myList которая заполняется при fetchData метода fetchData. Я использовал обещание имитировать запрос $ http в вашем контроллере.

Ваш контроллер должен выглядеть так:

angular.module('controller').controller('Ctrl1', function($scope, $state, dataService) {

    $scope.myList = dataService.myList;

    $scope.getUserList = function() {
        dataService.getUserList()
          .then(function(response) {
            //success
            if (response.data.status == "OK") { 
                    // $scope.myList = response.data.data;
                    $state.go('screen2');
            }
        }, function(response) {
            alert('failed');
        });
    }

});

Вам необходимо ввести службу dataService и запросить список, чтобы вы могли заполнить массив в области вашего контроллера:

$scope.myList = dataService.myList;

Когда вы вызываете метод $scope.getUserList() в своем контроллере, dataService будет извлекать данные:

dataService.getUserList()

и заполнить внутренний список, поэтому, когда вы перейдете в другое состояние, у dataService будет заполнен список, и область будет загружена новыми данными:

$scope.myList = dataService.myList;

Это плункер, где вы можете протестировать эксперимент.

PS: Я использовал один и тот же контроллер для другого состояния/представления, но, опять же, я бы этого не сделал.

  • 0
    Спасибо. Так что это работало, когда я пользовался сервисом. Но когда я не сделал, что вызвало проблему? просто хотел знать некоторые основы.
  • 0
    @JayeshJain: Попробуй воссоздать твою проблему в плунжере, и я попытаюсь объяснить. Приветствия.

Ещё вопросы

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