javascript - 带有特定子状态的ui-router仅在页面刷新时呈现JSON，无 View

我在整个应用程序中都使用了这种体系结构，但是在这里无法正常工作，我也不知道为什么。

我正在将威士忌数据加载到我的父州威士忌，后者应将数据传递给子州。它工作正常，但是在页面刷新时-它仅在页面上显示威士忌的json数据。

我的ng-inspector工具没有检测到Angular似乎没有加载。

//parent state with resolve to retrieve whiskey from service
.state('whiskey', {
            url: '/whiskey/{whiskeyId}',
            abstract: true,
            sticky: true,
            params: {
                post: null,
                index: null
            },
            resolve: {
                whiskey: [
          'Whiskey',
          '$stateParams',
          function (Whiskey, $stateParams) {
            console.log('$stateParams ', $stateParams)
            return Whiskey.show($stateParams.whiskeyId).then(function (whiskey) {
                return whiskey
            })
         }
      ]},
            views: {
                'main': {
                    templateUrl: '/views/whiskey/whiskey-header.html',
                    controller: 'Whiskey-headerCtrl'
                }
            }
        })

 //child state does not work on page refresh, just shows json data
.state('whiskey.whiskey-post', {
            url: '',
            views: {
                'whiskey-child': {
                    templateUrl: '/views/whiskey/whiskey-post.html',
                    controller: 'Whiskey-postCtrl'
                }
            }
        })

 //child state is working fine
.state('whiskey.whiskey-about', {
            url: '/about',
            views: {
                'whiskey-child': {
                    templateUrl: 'views/whiskey/whiskey-about.html',
                    controller: 'Whiskey-aboutCtrl'
                }
            }
        })

我的服务：

'use strict';
angular.module('clientApp').factory('Whiskey', function ($http, $q) {
  var currentWhiskey = { _id: 'init' };
  return {
    show: function (whiskeyId) {
      if (currentWhiskey._id !== whiskeyId) {
        return $http.get('whiskey/' + whiskeyId).then(function (res) {
          currentWhiskey = res.data;
        return   $q.when(currentWhiskey);
        });
      } else {
        return $q.when(currentWhiskey);
      }
    },

});

我还将在下面添加我的控制器：

//whiskey-header ctrl for parent state
'use strict';
    angular.module('clientApp').controller('Whiskey-headerCtrl', function (         $scope, whiskey) {

  $scope.whiskey = whiskey;

});

威士忌岗亭控制器：

'use strict';
angular.module('clientApp').controller('Whiskey-postCtrl', function ($state, $scope, Post, PostVote, Whiskey, $location, Voter) {

  $scope.post = [];

  $scope.queryObject = {
    sorter: 'timestamp',
    sort: { 'timestamp': -1 },
    skip: 0
  };

  $scope.sort = function (a) {
    var ascend = {};
    ascend[a] = 1;
    var descend = {};
    descend[a] = -1;
    if (_.isMatch($scope.queryObject.sort, descend)) {
      $scope.queryObject.sort = ascend;
      $scope.queryObject.sorter = a;
    } else if (_.isMatch($scope.queryObject.sort, ascend)) {
      $scope.queryObject.sort = descend;
      $scope.queryObject.sorter = a;
    } else {
      $scope.queryObject.sort = descend;
      $scope.queryObject.sorter = a;
    }
    $scope.post = [];
    $scope.isBusy = false;
    $scope.queryObject.skip = 0;
    $scope.loadMore();
  };

  $scope.loadMore = function () {
    if ($scope.isBusy === true) {
      return;
    }
    $scope.isBusy = true;
    Post.getPost({
      'queryObject': $scope.queryObject,
      'filter': { 'whiskey': $scope.whiskey._id }
    }).then(function (res) {
      if (!res.data.length) {
        $scope.isBusy = true;
        return;
      }
      if (res.data.errmsg) {
        toastr.error(res.data.errmsg);
      } else {
        if ($scope.post) {
          $scope.post.push.apply($scope.post, res.data);
        } else {
          $scope.post = res.data;
        }
        $scope.queryObject.skip += res.data.length;
        $scope.isBusy = false;
      }
    });
  };

    $scope.loadMore();
});

最佳答案

弄清楚了。

这与我的服务器端代码冲突。

我正在使用“ pretty-urls” / html5模式，该模式从浏览器url中删除哈希。

该状态与我的服务器上的该路由匹配：

app.get('/whiskey/:id', whiskeys.show);

因此，这就是为什么它为请求发送回纯json的原因。