ui-具有特定子状态的路由器仅在页面刷新时呈现 JSON，无视图

Question

我在我的整个应用程序中都使用了这种架构，但它在这里不起作用，而且我不明白为什么。

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

Angular 甚至似乎没有加载，因为我的 ng-inspector 工具没有检测到它。

//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;

});

威士忌-post 控制器：

'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();
});

Answer 1

想通了。

这与我的 server-side 代码冲突。

我正在使用 "pretty-urls" / html5 模式，该模式会从浏览器 url 中删除散列。

那个州在我的服务器上匹配这条路线：

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

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

ui-具有特定子状态的路由器仅在页面刷新时呈现 JSON，无视图

ui-router w/ specific child state only renders JSON on page refresh , no view

javascript

angularjs

angular-ui-router

angular-ui-router-extras