ui-routerは特定の子ステートでのみJSONをページの更新、表示なしでレンダリングします

Question

私はこのアーキテクチャをアプリケーション全体で使用しましたが、ここでは機能しません。

ウィスキーデータを親状態ウィスキーにロードしています。ウィスキーデータは、子状態にデータを渡す必要があります。うまくいきましたが、ページの更新時にページ上のウィスキーの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(); 
}); 

Answer 1

はそれを考え出しました。

これはサーバー側のコードと競合していました。

ブラウザのURLからハッシュを削除する「pretty-urls」/ html5モードを使用しています。状態は私のサーバー上でこのルートと一致したことを

：

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

それは要求のための純粋なJSONを返送された理由をこのように、これはあります。