Question

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

这就是流程的样子：

我打电话给网络服务并获得json。
我使用$ state.go（'screen2'）
这里我尝试用我的html绑定我的json。

我的代码：

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时..没有任何作用。

Webservice响应：

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

Answer 1

$scope的范围是单个控制器每个$stateProvider .state('home', { url: '/home', templateUrl: 'home.html', controller: 'homeController', }) .state('screen2', { url: '/screen2', templateUrl: 'screen2.html', controller: 'homeController', });成员都绑定到一个控制器，该控制器应该绑定到一个视图。

我怀疑你为2个不同的视图共享同一个控制器;也许是这样的：

(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，在调用方法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'); }); } });时会填充该集合。我已经使用了一个承诺来模拟控制器中的$ http请求。

您的控制器应如下所示：

dataService

您需要注入服务$scope.myList = dataService.myList;并请求列表，以便您可以在控制器范围内填充数组：

$scope.getUserList()

当您在控制器中调用方法dataService.getUserList()时，dataService将获取数据：

$scope.myList = dataService.myList;

并填写内部列表，因此当您进入不同的状态时，dataService将填充列表，并且范围将加载新数据：

wrote program in MR2 and using Hadoop 2.7.1 in psuedo distributed mode

这是一个可以测试experiment。

的插件

PS：我使用相同的控制器来处理不同的状态/视图但是，我再也不会这样做。

json的回应没有反映在视野中？

1 个答案: