相关疑难解决方法(0)

如何让后退按钮与AngularJS ui-router状态机一起使用?

我已经使用ui-router实现了angularjs单页面应用程序.

最初我使用一个不同的URL来识别每个州,但这是为了不友好的GUID打包网址.

所以我现在将我的网站定义为一个更简单的状态机.状态不是由URL标识的,而是根据需要简单地转换为,如下所示:

定义嵌套状态

angular
.module 'app', ['ui.router']
.config ($stateProvider) ->
    $stateProvider
    .state 'main', 
        templateUrl: 'main.html'
        controller: 'mainCtrl'
        params: ['locationId']

    .state 'folder', 
        templateUrl: 'folder.html'
        parent: 'main'
        controller: 'folderCtrl'
        resolve:
            folder:(apiService) -> apiService.get '#base/folder/#locationId'
Run Code Online (Sandbox Code Playgroud)

过渡到定义的国家

#The ui-sref attrib transitions to the 'folder' state

a(ui-sref="folder({locationId:'{{folder.Id}}'})")
    | {{ folder.Name }}
Run Code Online (Sandbox Code Playgroud)

这个系统工作得很好,我喜欢它干净的语法.但是,由于我没有使用URL,后退按钮不起作用.

如何保持我的整洁的ui-router状态机,但启用后退按钮功能?

javascript coffeescript angularjs angular-ui-router

85
推荐指数
4
解决办法
14万
查看次数

AngularJS,在后退按钮上使用没有刷新的路由

我正在使用angularJSAJAX构建一个简单的单页面应用程序,但是当用户使用本机后退按钮时,我遇到了问题.

angular.module('myApp', ['ionic', 'myApp.controllers', myApp.services])

.config(function ($routeProvider, $locationProvider) {

    $routeProvider.when('/home', {
       templateUrl: 'templates/feed.html',
       controller: 'MenuCtrl',
       reloadOnSearch: false
   });

   $routeProvider.when('/checkin/view/:id', {
       templateUrl: 'templates/checkin.html',
       controller: 'MenuCtrl'
    });

    $routeProvider.otherwise({
        redirectTo: '/home'
    });


     $locationProvider.html5Mode(true)

})
Run Code Online (Sandbox Code Playgroud)

更新:每个反馈移出$ http控件,并提出建议:

我的services.js档案:

angular.module('myApp.services', [])

 .factory('FeedService', ['$http', function($http){
   var state = {};

  var loadFeed = function(){
       $http({
           method: 'GET',
           url: 'http://api.example',
         }).success(function(data){
        // With the data succesfully returned, call our callback
           state = data.response;
           console.log(data);
        }).error(function(){
           alert("error");
       });
   };

   loadFeed();

   return {
       getState: function(scope){
           return …
Run Code Online (Sandbox Code Playgroud)

ajax jquery angularjs angular-routing

10
推荐指数
2
解决办法
2万
查看次数