Angularjs json响应未反映在视图中？

我调用一个返回JSON响应的webservice。我想使用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');
        });
    }

我的观点（屏幕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;

    }

  }

})();

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');
        });
    }

});

那不是一件好事。对于视图，最好有一个控制器

无论如何，由于您想要共享数据，因此必须使用某种缓存。 你能做的就是使用服务

您可以创建如下内容：

  $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;

    }

  }

})();

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');
        });
    }

});

此服务已获得一个集合

myList

，当调用方法

fetchData

时将填充该集合。我使用了一个承诺来模拟控制器中的$http请求

您的控制器应如下所示：

  $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;

    }

  }

})();

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;

这是一个plunker，您可以在其中测试

---

PS：我已经将同一个控制器用于不同的状态/视图，但我不会这样做。

Thx。因此，当我使用服务时，它起作用了。但当我不知道是什么导致了问题？我只是想知道一些基本原理。@JayeshJain:试着用一种简单的方式重现你的问题，我可以试着解释。干杯