$ state.go无法在单个控制器中工作

时间:2016-07-10 19:42:35

标签: javascript angularjs angular-ui-router angularjs-http

大家。我有一个奇怪的问题...我的应用程序中有几个状态,除了一个控制器内部外,它们似乎都有效。我已经发布了我正在尝试使用的功能的工厂,以及控制器,状态和应该触发该功能的视图:

app.factory('handleShipping', ['$http', function($http){
var handleShipping = {};
handleShipping.validate = function(address){
    return ($http.post('/shipping/validate',address).success(function(data){
        console.log(JSON.stringify(data));
    }));
}
    return handleShipping;

}]);

...

app.controller('ValidateCtrl',['$scope','$state', 'handleShipping','shipperName', 'auth',function($scope, $state, handleShipping, shipperName,auth){

    $scope.getShipper = function(shipName){
        shipperName.shipper = shipName;
    };


    $scope.validateAddress = function(){
        handleShipping.validate($scope.user).error(function(error){
            $scope.error = error;console.log('Error!');
        }).then(function(){
            $state.go('label');
        });
    };
}]);

...

 .state('address', {
                url: '/address', 
                templateUrl: '/address.html',
                controller: 'ValidateCtrl'
        })
 .state('label', {
               url: '/label', 
               templateUrl: '/label.html', 
               controller: 'LabelCtrl'
        });

...

<script type="text/ng-template" id="/address.html">
  <div class="page-header">

    <h1>Address, please</h1>

  </div>

  <div ng-show="error" class="alert alert-danger row">
    <span>{{ error.message }}</span>
  </div>

  <form ng-submit="validateAddress()"
    style="margin-top:30px;">


    <div class="form-group">
      <input type="text" class="form-control" placeholder="Street"
      ng-model="user.street"></input>
    </div>
    <div class="form-group">
      <input type="text"
      class="form-control"
      placeholder="City"
      ng-model="user.city"></input>
    </div>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="State" ng-model="user.state"></input>
    </div>
    <div class="form-group">
     <input type="text"
      class="form-control"
      placeholder="Zip Code"
      ng-model="user.zipCode">
     </input>
   </div>
   <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</script>

我没有收到任何错误消息。如果我键入localhost:3000 / label,我可以看到该视图。此外,我注意到一些奇怪的...如果我留在视图'地址',我按下'提交'按钮,没有任何反应。但如果我单独离开页面,并且应用程序在终端上运行,它将在控制台中随机显示错误消息,在终端上,我会看到

POST /shipping/validate - - ms - -

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:1)

工厂方法应该返回一个承诺。目前您正在使用 /** If possible, this method asks the adapter to generate an ID for a newly created record. @method _generateId @private @param {String} modelName @param {Object} properties from the new record @return {String} if the adapter can generate one, an ID */ _generateId(modelName, properties) { var adapter = this.adapterFor(modelName); if (adapter && adapter.generateIdForRecord) { return adapter.generateIdForRecord(this, modelName, properties); } return null; }, &amp;服务中的success回调,它不允许你对validate函数进行链接。您必须在控制台中收到错误。 error无效,因为执行没有进入该行。

返回promise后,您需要在验证方法调用后使用$state.go链接该承诺。

<强>工厂

.then

<强>控制器

handleShipping.validate = function(address){
    return $http.post('/shipping/validate',address);
};