json响应没有反映在视图中？

Question

我调用了一个返回 JSON 响应的 web 服务。我想使用 ng-repeat 绑定这个 json 数据以查看。 我在两个屏幕上使用相同的控制器。

流程是这样的：

• 我调用 Web 服务并获取 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');
        });
    }

我的视图（screen2）：

<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 时，没有任何效果。

网络服务响应：

{
    "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 方法时会填充该集合。我使用了一个 promise 来模拟你的控制器中的 $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：我为不同的状态/视图使用了相同的控制器，但我不会再这样做了。