Questions tagged «angular-ui-router»

我正在迁移基于AngularJS的应用程序以使用ui-router而不是内置路由。我将其配置如下所示 .config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/home'); $stateProvider .state('home', { url: '/home', templateUrl : 'views/home.html', data : { pageTitle: 'Home' } }) .state('about', { url: '/about', templateUrl : 'views/about.html', data : { pageTitle: 'About' } }) }); 如何使用pageTitle变量动态设置页面标题？使用内置的路由，我可以 $rootScope.$on("$routeChangeSuccess", function(currentRoute, previousRoute){ $rootScope.pageTitle = $route.current.data.pageTitle; }); 然后将变量绑定到HTML中，如下所示 <title ng-bind="$root.pageTitle"></title> 是否有类似事件可以挂接到ui-router上？我注意到有'onEnter'和'onExit'函数，但它们似乎与每个状态相关，将需要我重复代码以为每个状态设置$ rootScope变量。

101 angularjs  angular-ui-router 

这是我第一次尝试使用ui-router。 这是我的app.js angular.module('myApp', ['ionic']) .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) { StatusBar.styleDefault(); } }); }) .config(function($stateProvider, $urlRouterProvider){ $urlRouterProvider.otherwise("/index.html"); $stateProvider.state('index', { url: '/' template: "index.html", …

98 angularjs  angular-ui-router 

使用angular-ui-router，如何使用else方法在$ stateProvider上 else，或者如何使用它？

95 angularjs  angular-ui  angular-ui-router 

我正在使用的应用程序包含各种状态（使用ui-router），其中某些状态要求您登录，而其他状态则公开可用。 我创建了一种方法，可以有效地检查用户是否已登录，当前遇到的问题实际上是在必要时重定向到我们的登录页面。应该注意的是，登录页面当前未放置在AngularJS应用程序中。 app.run(function ($rootScope, $location, $window) { $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) { if (toState.data.loginReq && !$rootScope.me.loggedIn) { var landingUrl = $window.location.host + "/login"; console.log(landingUrl); $window.open(landingUrl, "_self"); } }); }); console.log会正确显示预期的URL。之后的那一行，我几乎尝试了从$ window.open到window.location.href的所有操作，无论我尝试了什么，都不会发生重定向。 编辑（已解决）： 找到了问题。 var landingUrl = $window.location.host + "/login"; $window.open(landingUrl, "_self"); 变量LandingUrl设置为'domain.com/login'，它与$ window.location.href一起不起作用（这是我尝试过的事情之一）。但是将代码更改为 var landingUrl = "http://" …

90 javascript  angularjs  redirect  angular-ui-router 

我正在创建一个基于标签的页面，其中显示了一些数据。我在AngularJs中使用UI-Router来注册状态。 我的目标是在页面加载时打开一个默认选项卡。每个选项卡都有子选项卡，我想在更改选项卡时打开默认的子选项卡。 我正在使用onEnter函数进行测试，并且正在使用内部，$state.go('mainstate.substate');但是由于循环效应问题（在state.go上对其子状态调用它的父状态，依此类推，然后变成循环），它似乎无法正常工作。 $stateProvider .state('main', { url: '/main', templateUrl: 'main.html', onEnter: function($state) { $state.go('main.street'); } }) .state('main.street', { url: '/street', templateUrl: 'submenu.html', params: {tabName: 'street'} }) 在这里，我创建了一个plunker演示。 目前，一切正常，除了我没有打开默认选项卡，而这正是我所需要的。 感谢您的建议，意见和想法。

89 javascript  angularjs  tabs  angular-ui-router 

我已经使用ui-router实现了angularjs单页应用程序。 最初，我使用不同的URL来标识每个状态，但这是针对不友好的GUID打包的URL。 因此，我现在将站点定义为一个更简单的状态机。状态不是由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' 过渡到定义状态 #The ui-sref attrib transitions to the 'folder' state a(ui-sref="folder({locationId:'{{folder.Id}}'})") | {{ folder.Name }} 该系统运行良好，我喜欢它的简洁语法。但是，由于我没有使用网址，因此后退按钮不起作用。 如何保持整洁的ui-router状态机但启用后退按钮功能？

87 javascript  angularjs  coffeescript  angular-ui-router 

我angular-ui-router在应用程序中使用和嵌套状态，并且我还有一个导航栏。导航栏是手写的，ui-sref-active用于突出显示当前状态。它是一个两级导航栏。 现在，当我进入时，说Products / Categories我希望同时突出显示Products（在1级）和Categories（在2级）。但是，使用时ui-sref-active，如果我处于状态，Products.Categories则仅突出显示该状态，而不突出显示Products。 有什么办法可以使Products该状态突出显示？

82 angularjs  angular-ui-router 

我在应用程序中测试路由器时遇到了一些麻烦，该应用程序基于Angular ui路由器构建。我要测试的是状态转换是否适当地更改了URL（稍后将进行更复杂的测试，但这是我开始的地方。） 这是我的应用程序代码的相关部分： angular.module('scrapbooks') .config( function($stateProvider){ $stateProvider.state('splash', { url: "/splash/", templateUrl: "/app/splash/splash.tpl.html", controller: "SplashCtrl" }) }) 和测试代码： it("should change to the splash state", function(){ inject(function($state, $rootScope){ $rootScope.$apply(function(){ $state.go("splash"); }); expect($state.current.name).to.equal("splash"); }) }) 关于Stackoverflow的类似问题（以及官方ui路由器测试代码）表明，将$ state.go调用包装在$ apply中就足够了。但是我已经做到了，状态仍然没有更新。$ state.current.name保持为空。

81 javascript  unit-testing  angularjs  angular-ui-router 

我正在尝试使用$ state.go函数实现“在新标签页中打开链接”功能。如果有这样的东西，那就太棒了： $state.go('routeHere', { parameter1 : "parameter" }, { reload : true, newtab : true // or smth like target : "_blank" }); 有什么办法可以使用AngularJS做到这一点？

81 angularjs  angular-ui-router  angular-ui 

我是Ionic的移动应用程序开发的新手。在登录和注销时，我需要重新加载页面以刷新数据，但是，$state.go('mainPage')无需重新加载即可将用户带回视图-永远不会调用其背后的控制器。 有没有办法清除历史记录并在Ionic中重新加载状态？

80 angularjs  angular-ui-router  ionic-framework 

这是一个两部分的问题： 我在加载控制器之前使用$ stateProvider.state（）中的resolve属性来获取某些服务器数据。如何在此过程中显示加载动画？ 我有一些子状态也利用了resolve属性。问题是ui-router似乎要在加载任何控制器之前完成所有解析。有什么方法可以让父控制器在解析解决后加载，而不必等待所有子解析都加载？对此的答案可能也将解决第一个问题。

80 javascript  angularjs  angular-ui-router 

我正在使用angular-ui-router库，URL出现问题。 我有以下代码： app.js： app.config(function ($stateProvider, $urlRouterProvider) { $stateProvider .state('state', { url: '/state', templateUrl: 'templates/state.html', onEnter: function () { /*... code ...*/ } })}); index.html： <a href="#/state">STATE</a> 这行得通，但是当我从<a>标记中删除“＃”时，此行不通。 如何从网址中删除“＃”符号？

78 javascript  angularjs  angular-ui-router 

我已经搜索了类似的问题，但是出现的问题似乎略有不同。我正在尝试动态更改链接的ui-sref =''（此链接指向向导表单的下一部分，下一部分取决于下拉列表上的选择）。我只是试图根据选择框中的某些选择来设置ui-sref属性。我可以通过绑定到在进行选择时设置的scope属性来更改ui-sref。但是链接不起作用，这有可能吗？谢谢 <a ui-sref="form.{{url}}" >Next Section</a> 然后在我的控制器中，我以这种方式设置url参数 switch (option) { case 'A': { $scope.url = 'sectionA'; } break; case 'B': { $scope.url = 'sectionB'; } break; } 另外，我使用指令通过根据选择框（下拉列表）上选择的选项生成具有所需ui-sref属性的超链接来使其工作。 但是，这意味着每次从选择框中选择一个不同的选项时，我都必须重新创建链接，这会导致不希望的闪烁效果。我的问题是，是否可以像上面那样通过更改控制器中url的值来更改ui-sref的值，还是每次选择时都必须使用伪指令重新创建整个元素？就像我在下面做的那样？（仅出于完整性目的显示此内容） 选择选项指令（此指令生成链接指令） define(['app/js/modules/app', 'app/js/directives/hyperLink'], function (app) { app.directive('selectUsage', function ($compile) { function createLink(scope,element) { var newElm = angular.element('<hyper-link></hyper-link>'); var el = $(element).find('.navLink'); …

78 angularjs  angular-ui  angular-ui-router 

考虑以下： .state('manager.staffList', {url:'^/staff?alpha', templateUrl: 'views/staff.list.html', data:{activeMenu: 'staff'}, controller: 'staffListCtrl'}) .state('manager.staffDetail', {url:'^/staff/{id}' , templateUrl: 'views/staff.html', data:{activeMenu: 'staff'}, controller: 'staffDetailsCtrl'}) .state('manager.staffDetail.view', {url:'/view', templateUrl: 'views/staff.details.html', data:{activeMenu: 'staff'}}) .state('manager.staffDetail.view.schedule', {url:'/schedule', templateUrl:'views/staff.view.schedule.html', data:{activeMenu: 'staff'}}) .state('manager.staffDetail.view.history', {url:'/history' , templateUrl:'views/staff.view.history.html', data:{activeMenu: 'staff'}}) .state('manager.staffDetail.view.log', {url:'/log', templateUrl:'views/staff.view.log.html', data:{activeMenu: 'staff'}}) .state('manager.staffDetail.view.files', {url:'/files', templateUrl:'views/staff.view.files.html', data:{activeMenu: 'staff'}}) .state('manager.staffDetail.edit', {url:'/edit', templateUrl: 'views/staff.edit.html', data:{activeMenu: …

77 javascript  angularjs  angular-ui-router  angular-ui 

今天，我一直在摆弄ui-router，以更好地了解Ionic的脚手架，而我注意到的一件事是，它们为“选项卡”的抽象状态提供了url。 我仅有两次使用抽象状态时，我使用一个空字符串作为url，并且注意到如果我不小心尝试导航到抽象状态（与子状态相对），则会收到错误消息： 无法转换为抽象状态“ [insertAbstractStateHere]” 编辑： “此外，在实验中，当我尝试为我的抽象状态（在Ionic之外）分配一个url并仍然渲染嵌套状态视图时，我得到了一个很大的鹅蛋。什么都没有出现。” 以上引用的陈述是错误的！我在Plunker再次尝试过，嵌套状态的确出现了。 angular.module('routingExperiments', ['ui.router']) .config(function($urlRouterProvider, $stateProvider) { $stateProvider .state('abstractExperiment', { abstract: true, url: '', //<--- seems as if any string can go here. templateUrl: 'abstractExperiment.html' }) .state('abstractExperiment.test1', { url: '/test1', templateUrl: 'abstractTest1.html' }); }); 显然我确实做错了。所以我的新问题是： 是否有任何理由为什么在使用抽象状态时会使用命名状态而不是空字符串，还是仅仅是一种样式选择？

73 angularjs  ionic-framework  angular-ui-router  state  abstract