Question

当我提交表单时，我有一个与服务通信的控制器，该服务从服务器获取数据并将这些数据返回给控制器。同时，我用表单动作更改视图。我的问题是我需要第二个视图中的服务器响应数据（它有另一个控制器），但这些是未定义的。我该如何解决这个问题？

聚苯乙烯。对不起我的英文

// code...
.state('app.search', {
  url: "/search",
  views: {
    'menuContent' :{
      templateUrl: "templates/search.html",
          controller: 'SearchCtrl'
    }
  }
})

.state('app.result', {
  url: "/result",
  views: {
    'menuContent' :{
      templateUrl: "templates/result.html",
      controller: "ResultCtrl",
     }
  }
})
// code...

<form name="search_form" ng-submit="searchLines()" action="#/app/result" novalidate>
  // code...
</form>

.factory('Bus', function($http){
return{
    get: function(callback){ 
        $http({
            method: "POST",
            url: "someUrl",
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 
            data: {someData from the form}
        })
        .success(function(data) { 
            callback(data);
        })
        .error(function(data, status, error) { 
            console.log(data, status, error);
        });
    }
}
});

.controller('SearchCtrl', function($scope, Bus){
    $scope.searchLines = function(){
        Bus.get(function(data){
          $scope.company = data.company; // this is ok
        }); 
     };
})

.controller('ResultCtrl', function($scope, Bus){
    // I'd like to have $scope.company here
})

Answer 1

使用service。
Controllers 不应该保持状态两个controllers可以通过service进行通信（service也可以保持状态。）

在总线service上添加公司变量并添加 getter ，以便其他controllers可以从总线获取数据。

示例：

HTML：

<div ng-app="app">
    <div ng-controller="aCtrl">{{model.stateA}}</div>
    <div ng-controller="bCtrl">{{model.stateB}}</div>
</div>

JS：

var app = angular.module('app', []);

app.service('myService', function ($q) {
    var state = "12312";

    this.getStateFromServer = function () {
        return $q.when(state);
    }

    this.getRealState = function(){
        return state;
    };
});

app.controller('aCtrl', function ($scope, myService) {
    myService.getStateFromServer().then(function (res) {
        $scope.model = {
            stateA: "A" + myService.getRealState()
        };
    });
});


app.controller('bCtrl', function ($scope, myService) {
    $scope.model = {stateB: "B" + myService.getRealState()};
});

JSFIDDLE

AngularJS：如何在不同的控制器中获取http数据

1 个答案: