标签: angular-ui-router

我希望能够在不改变状态的情况下更改地址'URL,以防止重新渲染.从我的搜索,ui-router目前不提供这个,但从$location.pathanuglar做.

所以,当然,我想用来$state.get(stateName)获取状态的URL,这样我就不会手动输入URL.

我有两个问题:

1. $state.get(stateName)仅返回相对路径.我怎样才能获得绝对路径？
2. 它还返回状态的定义,参数未定义.如何获取带有参数的URL？

例如,如果我有一个名为user.home.viewwith 的状态user.home,我将我的状态定义为

'user': {
     abstract: true,
     url: '^/users/'
},
'user.home': {
     url: ''
},
'user.home.view': {
     url: ':id/'
}

所以现在,$state.get(user.home.view).url回归:id/.我怎样才能获得完整的URL(即/users/5/)？

我有4种状态:dashboard,dahboard.main,dashboard.minor,login.仪表板是抽象的,它是.minor和.main状态的父状态.以下是我的代码:

.state('dashboard', {
        url: "/dashboard",
        abstract: true,
        templateUrl: "views/dashboard.html",
        resolve: {
            auth: function ($q, authenticationSvc) {
                var userInfo = authenticationSvc.getUserInfo();
                if (userInfo) {
                    return $q.when(userInfo);
                } else {
                    return $q.reject({ authenticated: false });
                }
            }
        },
        controller: "DashboardCtrl",
        data: { pageTitle: 'Example view' }
    })
    .state('dashboard.main', {
        url: "",
        templateUrl: "views/main.html",
        controller: "DashboardCtrl",
        data: { pageTitle: 'Main view' }
    })

正如您在仪表板状态中看到的,我有解决方案选项.如果他没有被授权,我想将用户重定向到登录页面.出于这个原因,我使用特殊的authenticationSvc服务:

.factory("authenticationSvc", ["$http", "$q", "$window", function ($http, $q, $window) { …

这可能很简单,但我在文档中找不到任何东西,谷歌搜索没有帮助.我正在尝试定义一个状态,$stateProvider我需要在服务器上点击以获取所需数据的URL取决于状态URL参数.简而言之,像:

 .state('recipes.category', {
    url: '/:cat',
    templateUrl: '/partials/recipes.category.html',
    controller: 'RecipesCategoryCtrl',
    resolve: {
      category: function($http) {
        return $http.get('/recipes/' + cat)
          .then(function(data) { return data.data; });
      }
    }
  })

以上不起作用.我尝试注射$routeParams以获得所需的cat参数,没有运气.这样做的正确方法是什么？

有没有办法在模块配置后以编程方式将状态添加到$ stateProvider,例如服务？

要为这个问题添加更多上下文,我有一种情况可以采用两种方法:

1. 尝试强制重新加载模块配置中定义的状态,问题是状态有一个reloadOnSearch设置为false,所以当我尝试$ state.go('state.name',{new:param},{reload:真正}); 没有任何反应,任何想法？

国家定义

.state('index.resource.view', {
  url: "/:resourceName/view?pageNumber&pageSize&orderBy&search",
  templateUrl: "/resourceAdministration/views/view.html",
  controller: "resourceViewCtrl",
  reloadOnSearch: false,
})

2. 尝试以编程方式添加我需要从服务加载的状态,以便路由可以正常工作.如果可能的话,我宁愿选择第一个选项.

我有侧边栏菜单的应用程序.我在第二页,我正在调用控制器功能,它将我重定向到第一页使用:

$state.go('app.home');

问题是在这个页面上现在显示后退按钮下一个侧边栏菜单图标,见下图:

有人可以告诉我如何拒绝将按钮添加到已分配侧栏菜单的页面中吗？

谢谢你的帮助.

app.js与路由器配置如下:

angular.module('Test', ['ionic', 'config', 'Test', 'LocalStorageModule'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider, localStorageServiceProvider) {
   localStorageServiceProvider
     .setPrefix('max_relax');
   $stateProvider

    .state('app', {
      url: '/app',
      abstract: true,
      templateUrl: 'templates/menu.html',
      controller: 'AppCtrl'
    })

    .state('app.home', {
      url: '/home',
      views: {
        'menuContent' :{
          templateUrl: 'templates/home.html',
          controller: …

我正在尝试实现一个语言切换器,如果用户点击"en"侧的任何给定页面上的"de" - 它会将它们带到"de"侧的那个页面.如果我在console.dir中使用$ state参数,它会使用给定$ state的"current"属性公开我想要的值.如果我尝试使用console.dir $ state.current来关注我想要的值,它只给出父状态属性(我当前的视图是嵌套的).

我当前的想法是,我在url/en/content,然后动态地我可以让我的lang导航动态地将适当的目标点加载到某种数据属性中,用我自己启动的自定义指令选择那些"转到"并根据angular-translate设置我的首选语言值.

目前的关键问题是暴露那个$ state name - 再次,当简单地浏览$ state时,当前对象给出了我想要的值,但$ current.state直接只给出了父状态.

如果有人有更好的建议如何做到这一点(以一种有角度的方式 - 没有自定义cookie垃圾)我很乐意接受建议.

谢谢!

更新!代码示例:

我的州的对象参考:

var urlStates = {
        en: {
            home: {
                name: 'home',
                url: '/en',
                templateUrl: 'templates/'+lang+'/home.html',
                abstract: 'true'
            },
            home_highlights: {
                name:'home.highlights',
                url: '',
                templateUrl: 'templates/'+lang+'/home.highlights.html'
            },
            home_social:
            {
                name: 'home.social',
                url: '/social',
                templateUrl: 'templates/'+lang+'/home.social.html'
            },
            home_map:
            {
                name: 'home.map',
                url: '/map',
                templateUrl: 'templates/'+lang+'/home.map.html'
            }

        };

我的国家:

$stateProvider
        .state(urlStates.en.home)
        .state(urlStates.en.home_highlights)
        .state(urlStates.en.home_social)
        .state(urlStates.en.home_map);

        $locationProvider.html5Mode(true);

})

控制器:

.controller('LandingPage', function($translate, $state){
    this.state = $state; …

有没有之间的功能差异ui-sref和$state.go()？

ui-sref用于控制器中<a>...</a>并$state.go('someState')用于控制器中.

在HTML中,我会使用:

<a ui-sref="currentState.state1">Link</a>

而在一个函数中我会使用类似的东西:

if(someCondition) {
    $state.go('currentState.state1');
}

那么,它或者我需要在之后添加一些东西$state.go()吗？假设当前状态是currentState.

使用ui-router-ng2而不是新的Angular2路由器有什么好处和缺点？在过去,我使用ui-router和Angular 1.x而不是使用ngRoute,因为我需要更好地支持嵌套状态/路由.

那么现在,Angular2呢？我想听听你的意见,以便我能评估这两个机会.

此外,搜索和搜索谷歌我发现ngrx /路由器,我不知道.你能告诉我Angular2 的内置路由器,Angular2和ngrx路由器的新ui路由器之间有什么区别吗？

我正在使用ui-router来嵌套状态和视图.当我单击链接时,URL将更改为子状态的URL,但模板不会加载.

例如,当URL更改为子状态时project/settings,project.settings.html不会加载相应的模板.

这是一个礼貌SSCCE Plunkr

以下是我的代码:

app.js

myApp.config(function ($stateProvider, $urlRouterProvider){
             $stateProvider
                  .state('project', {
                         url: "/project",
                         views:{
                         "content":{templateUrl: "partials/project.html"},
                         "header":{templateUrl: "partials/header"}
                         }
                       })

                  .state('project.settings', {
                          url: "/settings",
                          views:{
                           "content":{templateUrl: "partials/project.settings.html"},
                           "header":{templateUrl: "partials/header"}
                          }
                         }) 
            $urlRouterProvider.otherwise("/")                   
   }); 

    /* cheching whether the user is authentic or not*/


 myApp.run(function($rootScope,$location,$cookieStore,validateCookie,$state) {
      $rootScope.$on('$stateChangeStart',function(event,toState,toParams,fromState){
         if($cookieStore.get('user')){
            validateCookie.authService(function(result,error){
              if(!result){
                 $location.path("/");
              }else{
                $state.go('project.settings');
              }
            });   
         }
         else{
            $location.path("/"); 
         }
        });
    });

的index.html

                <div ng-controller="userController">
                    <div ui-view="header"></div>
                    <div class="container" ui-view="content"></div>
                </div>

project.html

            <div ng-controller="userController">
                <div class="details">
                    <a ui-sref=".settings" …

更新:这应该可以在angular-ui-router中使用1.0.0alpha0.请参阅发行说明https://github.com/angular-ui/ui-router/releases/tag/1.0.0alpha0和问题https://github.com/angular-ui/ui-router/issues/1018 I创建.

在处理解决方案时,我想访问应用程序导航到使用角度ui-router的状态名称和其他属性.

原因是:我想在允许应用程序输入该页面之前异步加载一些用户数据(包括其访问权限).

目前这是不可能的,因为将$ state注入解决点指向您正在导航的状态,而不是您要导航到的状态.

我知道我可以:

• 使用$ rootScope('$ stateChangeStart')在其他地方获取toState并将其保存在我的设置服务中.但我觉得它有点乱.
• 硬编码状态进入决心,但我不想重复我的决心所有页面

我还在ui-router github上创建了一个问题(如果你有兴趣,请点击+1):https: //github.com/angular-ui/ui-router/issues/1018

到目前为止,这是我的代码.任何帮助赞赏!

.config(function($stateProvider) {

    $stateProvider.state('somePage', {
        // ..
        resolve: {
            userData: function($stateParams, $state, Settings) {
                return Settings.getUserData() // load user data asynchronously
                    .then(function (userData) {
                        console.log($stateParams);
                        console.log($state);
                        // Problem: $state still points to the state you're navigating away from
                    });
            }
        }
    });
});