在 $http.post 之后使用 $http.get 重新加载控制器

Posted

技术标签:

【中文标题】在 $http.post 之后使用 $http.get 重新加载控制器【英文标题】:Reload controller with $http.get after $http.post 【发布时间】:2016-06-02 03:57:58 【问题描述】:

我的 IONIC 应用程序有问题。 我想在 $http.post 之后重新加载我通过 $http.get 从 nodeJS 收到的数据。 这是我的代码:

.controller('todoTodayCtrl', 
function($scope, AuthService, API_ENDPOINT, $http, $state, $ionicPopup) 
  $http.get(API_ENDPOINT.url + '/today').then(function(result) 
      $scope.todaylist = result.data.msg;
  );
)

.controller('todoTodayNewCtrl', 
function($scope, AuthService, API_ENDPOINT, $http, $state, $ionicPopup)
    $scope.today = 
        title: ''
    ;
    $scope.todoNewButton = function() 
        $http.post(API_ENDPOINT.url + '/today', $scope.today).then(function(result) 
            $state.go('menu.todoToday');
        , function(errMsg) 
            var alertPopup = $ionicPopup.alert(
                title: 'Nelze přidat Todo',
                template: errMsg
            );
        );
    ;
)

第一页

<ion-view title="Todo Today" ng-controller="todoTodayCtrl">
<ion-content overflow-scroll="true" padding="true" class="has-header">
    <ion-list>
        <ion-item class="item-divider"  ng-repeat="today in todaylist">today.title - today.time</ion-item>
        <button class="button button-stable button-block " ui-sref="menu.todoTodayNew">Přidat todo</button>
    </ion-list>
</ion-content>

和带有表单的页面

<ion-view title="Nové todo today">
<ion-content overflow-scroll="true" padding="true" class="has-header">
    <ion-list>
        <label class="item item-input">
            <span class="input-label">Nový úkol</span>
            <input type="text" placeholder="Nová položka" ng-model="today.title">
        </label>
        <button class="button button-stable button-block " ng-click="todoNewButton()">Přidat todo today</button>
    </ion-list>
</ion-content>

【问题讨论】:

【参考方案1】:

您必须在 POST 请求回调中将新的今天值推送到 $scope.todaylist 中:

$http.post(API_ENDPOINT.url + '/today', $scope.today).then(function(result) 
    $scope.todaylist.push(result);
    $state.go('menu.todoToday');
, function(errMsg) 
    var alertPopup = $ionicPopup.alert(
        title: 'Nelze přidat Todo',
        template: errMsg
    );
);

或者通过 $state 将结果传递给你的 todoTodayCtl。

$state.go('menu.todoToday', myParam: some: 'thing')

$stateProvider.state('menu.todoToday', 
                url: '/myState',
                params: myParam: null, ...

然后访问控制器中的参数。

$stateParams.myParam //should be some: 'thing'

【讨论】:

.controller('todoTodayNewCtrl', function($scope, AuthService, API_ENDPOINT, $http, $state, $ionicPopup) $scope.today = title: '' ; $scope.todoNewButton = function() $http.post(API_ENDPOINT.url + '/today', $scope.today).then(function(result) $scope.todaylist.push(result); , function(errMsg) var alertPopup = $ionicPopup.alert( title: 'Nelze přidat Todo', template: errMsg ); ); ; ) 你确定你的API工作正常吗,检查POST请求是否记录了新数据,GET请求是否得到今天的数组。 另外,在 todoTodayCtrl 顶部定义 $scope.todaylist = []。 如果你的两个控制器处于同一级别,使用 $rootScope,或者在 todoTodayCtlr 和 todoTodayNewCtrl 的父控制器中定义 $scope.todaylist = []。我认为您的问题是您在这里有两个不同的范围,彼此独立。【参考方案2】:

还有我的服务器 NodeJs

    apiRoutes.post('/today', passport.authenticate('jwt', session: false), function(req, res) 
  var token = getToken(req.headers);
  if (token) 
    var decoded = jwt.decode(token, config.secret);
    User.findOne(
      name: decoded.name
    , function(err, user) 
      if (err) throw err;

      if (!user) 
        return res.status(403).send(success: false, msg: 'Authentication failed. User not found.');
       else 
        console.log(req.body.title);
        var newToday = new Today(
          title: req.body.title,
          time: 'Timeee',
          user: user.name
        );
        newToday.save(function(err) 
          if (err) 
            res.json(succes: false, msg: 'Error');
           else 
            res.status(200).json(succes: true, msg: newToday);
          
        );
      
    );
   else 
    return res.status(403).send(success: false, msg: 'No token provided.');
  
);

【讨论】:

【参考方案3】:

解决了

    .controller('todoTodayCtrl', function($scope, $rootScope, AuthService, API_ENDPOINT, $http, $state, $ionicPopup) 
      $rootScope.todaylist = [];
      $http.get(API_ENDPOINT.url + '/today').then(function(result) 
        $rootScope.todaylist = result.data.msg;
      );
)

.controller('todoTodayNewCtrl', function($scope, $rootScope, AuthService, API_ENDPOINT, $http, $state, $ionicPopup)
  $scope.today = 
    title: '',
    time: ''
  ;
  $scope.todoNewButton = function() 
    $http.post(API_ENDPOINT.url + '/today', $scope.today).then(function(result) 
      $rootScope.todaylist.push(result.data.msg);
      $state.go('menu.todoToday');

    , function(errMsg) 
      var alertPopup = $ionicPopup.alert(
        title: 'Nelze přidat Todo',
        template: errMsg
      );
    );
  ;
)

【讨论】:

以上是关于在 $http.post 之后使用 $http.get 重新加载控制器的主要内容,如果未能解决你的问题,请参考以下文章

$http post 请求未添加指定的标头

在java中如何实现http/post/xml发送数据报文?麻烦高手赐教!

使用 HTTP 'POST' 请求在表格中显示图像

$http.post 的 Web API 405 错误

使用 Firefox 在 AngularJS 中成功回调 $http.post

使用 JavaScript 出现在控件之后/下方的控件的 ViewState 丢失