json 响应未反映在视图中？

Question

我调用了一个 returns JSON 响应的网络服务。我想绑定此 json 数据以使用 ng-repeat 查看。 我为两个屏幕使用相同的控制器。

流程是这样的：

我调用网络服务并得到 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>

当我 hardcode 并将 json 数据直接附加到控制器的范围时。一切正常。但是当我在 $http 的响应中绑定相同的 json 时..没有任何效果。

Web 服务响应：

{
    "status": "OK",
    "data": [
        {
            "name": "lorel",
            "type": "off"
        },
        {
            "name": "edimax",
            "type": "on"
        },
        {
            "name": "ipsum",
            "type": "on"
        },
        {
            "name": "blah blah",
            "type": "on"
        }
    ]
}

Answer 1

$scope.myList 仅限于单个控制器。
每个 $scope 成员都绑定到一个控制器，控制器应该绑定到一个视图。

我怀疑您正在为 2 个不同的视图共享同一个控制器；也许是这样的：

  $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 时被填充。我已经使用承诺在您的控制器中模拟 $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;

这是一个插件，您可以在其中测试 experiment。

PS：我对不同的 state/view 使用了相同的控制器，但是，我不会那样做。

json 响应未反映在视图中？

json response not reflecting in view?

angularjs

ng-repeat

angularjs-scope

angularjs-ng-repeat

ionic-framework