天道酬勤,学无止境

Angular ui-router... Display default tab

I am arriving on bookDetails state form some other link. Here bookDetails state's template has links for different tabs (or templates). And associated controller EditBookController has a json file using which I am building forms in different tabs with states like bookDetails.basic and bookDetails.publisher which use parent EditBookController. It's working fine. How to directly display the default bookDetails.basic instead of making user click the link? If I make bookDetails abstract(abbstract:true) and provide an empty link to bookDetails.basic I get following error Cannot transition to abstract state 'bookDetails'

    $urlRouterProvider.otherwise('/home');

    $stateProvider
    .state('home', {              
              url:'/home',
              controller: 'HomeController',
              templateUrl: '/static/publisher/views/Publisher_Home_Template.html'
          })
    .state('books', {
              url:'/books',
              controller: 'BooksController',
              templateUrl: '/static/publisher/views/Book_Listing_Template.html'
          })          
    .state('bookDetails', {
              url : '/books/:b_id',                

              controller: 'EditBookController',                  
              templateUrl: '/static/publisher/views/Product_Page_Template.html'
          }) 

    .state('bookDetails.basic', {
              url : '/basic',                  
              templateUrl: '/static/publisher/views/tab1.html'
          }) 

    .state('bookDetails.publisher', {
              url : '/publisher',                  
              templateUrl: '/static/publisher/views/tab2.html'
          })       

A plunk with similar problem. but code is different On clicking form it should land on the profile profile form.

评论

I created working example here

There is similar question: Redirect a state to default substate with UI-Router in AngularJS

The solution comes from a cool "comment" related to an issue with redirection using .when() (https://stackoverflow.com/a/27131114/1679310) and really cool solution for it (by Chris T, but the original post was by yahyaKacem)

https://github.com/angular-ui/ui-router/issues/1584#issuecomment-75137373

In the state definition I added ONLY one setting to bookDetails state, the: redirectTo: 'bookDetails.basic',. Let's have a look:

$urlRouterProvider.otherwise('/home');

$stateProvider
.state('home', {              
          url:'/home',
          controller: 'HomeController',
          templateUrl: '/static/publisher/views/Publisher_Home_Template.html'
      })
.state('books', {
          url:'/books',
          controller: 'BooksController',
          templateUrl: '/static/publisher/views/Book_Listing_Template.html'
      })          
.state('bookDetails', {
          // NEW LINE
          redirectTo: 'bookDetails.basic',
          url : '/books/:b_id',
          controller: 'EditBookController',                  
          templateUrl: 'static/publisher/views/Product_Page_Template.html'
      }) 

.state('bookDetails.basic', {
          url : '/basic',                  
          templateUrl: '/static/publisher/views/tab1.html'
      }) 

.state('bookDetails.publisher', {
          url : '/publisher',                  
          templateUrl: '/static/publisher/views/tab2.html'
      })  

And now - only these few lines will do the miracle:

app.run(['$rootScope', '$state', 
 function($rootScope, $state) {

  $rootScope.$on('$stateChangeStart',
    function(evt, to, params) {
      if (to.redirectTo) {
        evt.preventDefault();
        $state.go(to.redirectTo, params)
      }
    }
  );
}]);

This way we can adjust any of our states with its default redirection...Check it here

From Directing the user to a child state when they are transitioning to its parent state using UI-Router:

Either change the bookDetails.basic state to:

.state('bookDetails.basic', {
  url : '',                  
  templateUrl: '/static/publisher/views/tab1.html'
})

Or add the following routing:

$urlRouterProvider.when('/books/{b_id}', '/books/{b_id}/basic');

Try to add $state.go('bookDetails.basic') inside EditBookController. If I understood you< this will help.

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 角度 ui-router 在选项卡之间保持状态(angular ui-router maintaining state between tabs)
    问题 想知道在选项卡之间保留状态的最佳方法。 我使用引导标签和角度 ui-router。 我在其中一个选项卡中有一张谷歌地图,并且不想在用户选择该选项卡时重新加载地图。 请指教。 谢谢 回答1 我认为您正在寻找的内容已在本期讨论:https://github.com/angular-ui/ui-router/issues/63 他们主要讨论 iframe,但我相信谷歌地图也应该如此。 不幸的是,在线程中,他们认为这不应该在核心版本中实现。 我还没有尝试过他们提供的指令(如果有机会,我会让你知道它是怎么回事),但你可能会得到一些与之相关的东西。 我实际上遇到了您遇到的确切问题。 我的解决方案是使用样式按钮作为我的选项卡和地图选项卡的 ng-show: <div id="info-btns"> <button class="btn" ng-model="view" btn-radio="'info'"> Info </button> <button class="btn" ng-model="view" btn-radio="'map'" ng-click="loadMap()"> Map </button> </div> <div class="content" ng-show="view != map"> <div ui-view="info"></div> </div> <div
  • 带有 ui-router 的角度材料中的每个选项卡单独的控制器(Separate controller per tab in angular-material w/ ui-router)
    问题 我正在尝试实现我的md-tabs因此每个md-tab都是使用 angular-material 的单独状态。 我当前的标记如下所示: md-tabs.is-flex.auto-flex(selected="selectedIndex",layout="vertical") md-tab(on-select="selectTab(0)",label="Player",ui-sref="state1") div.tab(ui-view) md-tab(on-select="selectTab(1)",label="Map",ui-sref="state2") div.tab(ui-view) 不过,我认为这不是 ui-router 的有效标记。 是否可以使用当前版本的 angular-material 和 ui-router 来做到这一点? 回答1 如果你命名你的 ui-view 元素(例如<div ui-view="player"></div> ),那么你可以在你的 $stateProvider 配置中定位它们。 因此,鉴于template.html 中的以下标记: <md-tabs md-selected="currentTab"> <md-tab label="Player" ui-sref="tabs.player"> <div ui-view="player"><
  • md-tabs with angular ui-router not rendering grandchildren
    I am using Angular 1.6.2 with Angular Material 1.3 and making fairly heavy use of components. I have an outer "appComponent" that wraps the rest of the app and provides a header toolbar with navigation, a footer and then my top-level app components load within a ui-view inside the app component. One of my components is a customer maintenance page that has a list in a tab on tab 1 and then customer specific details on tab 2. tab 2 loads another template via ng-include that includes several tabs. A few of those tabs contain child data and I want to lazy load them, so I create states for them
  • 带有角度 ui-router 的 md-tabs 不呈现孙子(md-tabs with angular ui-router not rendering grandchildren)
    问题 我将 Angular 1.6.2 与 Angular Material 1.3 一起使用,并大量使用组件。 我有一个外部“appComponent”,它包装了应用程序的其余部分,并提供了一个带有导航的标题工具栏、一个页脚,然后我的顶级应用程序组件在应用程序组件内的 ui 视图中加载。 我的一个组件是客户维护页面,它在选项卡 1 的选项卡中有一个列表,然后在选项卡 2 上有客户特定的详细信息。 选项卡 2 通过 ng-include 加载另一个模板,其中包含多个选项卡。 其中一些选项卡包含子数据,我想延迟加载它们,所以我为它们创建了这样的状态: .state('customers', { url: "/customers", templateUrl: "components/customer/index.html", role: "customers", resolve: { authenticate: authenticate } }) .state('customers.customer', { url: "/{customerId}", templateUrl: "components/customer/index.html", role: "customers - edit", view: "customerdetail", }) .state('customers
  • UI-Router:页面刷新时状态重定向到第一个孩子(UI-Router : State redirecting to first child on page refresh)
    问题 我正在使用具有多个命名视图的 UI 路由器开发 AngularJS 应用程序。 我的应用程序在 index.html 中有一个 ui-view,状态配置为: $stateProvider .state('login', { url : '/', templateUrl : "partials/login.html", controller : "login-controller" }) .state("portal", { url :"", abstract : true, templateUrl : "partials/header.html", }) .state("portal.create-claim", { url : "/dashboard", views : { 'create-claim' : { templateUrl : "partials/create-claim.html", controller : "create-claim-controller" } } }) .state("portal.history", { url : "/history", views : { 'history' : { templateUrl : "partials/history.html", controller : "history-controller" } }
  • Angular Material Tabs + ui-router:body 未加载(Angular Material Tabs + ui-router: body not loading)
    问题 更新:在 Angular Material 0.10.0 中修复了ui-sref和md-tabs的使用 首先,我们知道有几个与此类似的问题。 但是,我们已经尝试了几个小时,但仍然没有运气,所以让我们看看是否有人可以对这个特殊情况有所了解。 我们试图有两个选项卡,两个不同的视图和两个不同的控制器。 选项卡呈现良好,它们工作,并且选项卡更改时 URL 更改,但永远不会加载选项卡“正文”。 ui-sref 在跨度中定义以避免 https://github.com/angular/material/issues/2344 模块配置 function testRouteConfig($stateProvider) { $stateProvider .state('testTabs', { abstract: true, url: '/test/tabs', templateUrl: 'modules/test/test.html', controller: 'TestController as vm' }) .state('testTabs.testMain', { url: '/test/main', data: { 'selectedTab': 0 }, views: { 'testMain': { templateUrl: 'modules/test/main/mainTest
  • 如何使用 Angular Ui-Router 减少具有相同“templateUrl”的“状态”数量(How to reduce number of 'states' with same 'templateUrl' using Angular Ui-Router)
    问题 好吧,我需要一些关于 Angular UI-Roter 路由问题的帮助。 嗯,其实不是问题,更多的是减少代码。 我有三个子状态: main.tab1.hello main.tab2.hello main.tab3.hello 他们有相同的'templateUrl' : 'hello.html' 我想知道是否可以仅在一种状态下减少它们,当然,当我单击按钮时,我不想更改 URL。 这是我的 Plunkr:http://plnkr.co/edit/ej7pCo1RRXPTBL6p8dsL 任何帮助,将不胜感激。 回答1 ...嗯,其实不是问题,更多的是减少代码。 一般来说,我建议使用一些状态名称array ,然后对其进行迭代以创建其所有子项: var states = ["main.tab1", "main.tab2", "main.tab3"] states.forEach(function(parentName){ $stateProvider .state(parentName + ".hello", { views: { "viewC@main": { templateUrl:"hello.html" } }, }) }) 有采用这种方法的更新 plunker 但是还有更复杂的方法,可以从内置功能中获益: 装饰器(名称,函数) 有详细解释的工作示例: 如何在 UI
  • 双重嵌套视图:UI-Router或UI-Bootstrap选项卡/手风琴?(Doubly nested views : UI-Router or UI-Bootstrap tabs / accordion?)
    问题 我是Angular(和JS)的总书生(但是有很多其他软件开发经验)。 我想开发这样的东西: (对@PhillipKregg借用了他的出色插图表示歉意)。 实际上,我想要嵌套的选项卡式笔记本-一排选项卡(视图?),每个选项卡都可以包含数据或另一排选项卡(每个...)。 谷歌搜索似乎为UI-Router返回了更多建议,但我想也可以使用UI-Bootstrap的Tabs或Accordion(甚至UI-Bootstrap的Pagination,使用一个视图,我可以根据所选页面更新其内容?)。 在其他条件相同的情况下,我将选择最适合新手理解和实施的那个(那是什么?)。 但是-是否存在性能问题? 例如,将立即下载所有视图的内容还是加载初始页面(从而增加初始页面下载时间)? 当视图变为活动状态时,是否只会下载该视图的数据(似乎更可取)? 我还有什么需要考虑的吗? 在此先感谢您的帮助。 回答1 是的,ui-router和ui-bootstrap.tabs是目前完成此工作的最佳工具。 要执行类似的操作,将需要混合两种类型的ui-router配置模式,即nest views和multiple named views 。 我建议阅读以下两个维基页面: https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views
  • Separate controller per tab in angular-material w/ ui-router
    I'm trying to implement my md-tabs so each md-tab is a separate state using angular-material. My current markup looks like this: md-tabs.is-flex.auto-flex(selected="selectedIndex",layout="vertical") md-tab(on-select="selectTab(0)",label="Player",ui-sref="state1") div.tab(ui-view) md-tab(on-select="selectTab(1)",label="Map",ui-sref="state2") div.tab(ui-view) I don't think this is valid markup for ui-router, though. Is it possible to do this with the current version of angular-material and ui-router?
  • angular ui-router maintaining state between tabs
    Would like to know the best way to preserve state between tabs. I use bootstrap tabs and angular ui-router. I've a google map in one of the tabs and don't want to reload the map when user selects that tab. Please advise. Thanks
  • Angular Material Tabs + ui-router: body not loading
    Update: the use of ui-sref and md-tabs was fixed in Angular Material 0.10.0 First of all, we're aware there's several issues similar to this one. However, we've been trying for hours, and still no luck, so let's see if someone can shed a bit of light on this particular case. We are trying to have two tabs, with two different views an two different controllers. The tabs render fine, they work, and the URL changes on tab change, but the tab "body" is never loaded. The ui-sref is defined in a span to avoid https://github.com/angular/material/issues/2344 Module configuration function
  • Angular ui-bootstrap选项卡不呈现ui-view(Angular ui-bootstrap tabs not rendering ui-view)
    问题 我正在将现有的angular应用程序升级到angular(v1.2.13),ui-router(v0.2.8)和ui-bootstrap(v0.10.0)的所有最新版本。 我有具有多个命名视图的嵌套视图。 其中一个命名视图内部具有选项卡。 我曾经能够在每个标签中设置ui-views ,但现在不再起作用。 如果我不使用选项卡,则命名视图将正确呈现。 我创建了一个plunkr以显示我所看到的。 这是我的状态配置。 _split.html具有3个命名视图: TOP , MIDDLE和BOTTOM 。 TOP和MIDDLE都已命名视图LEFT和RIGHT 。 TOP具有选项卡,并且不呈现视图LEFT或RIGHT 。 MIDDLE具有相同的命名视图,并且它们可以正确呈现。 $stateProvider .state("foo", { abstract: true, url: "/foo", templateUrl: '_split.html', }) .state("foo.view", { abstract: true, url: '', views: { 'TOP': { template: '_tabs.html' }, 'MIDDLE': { templateUrl: '_tabs2.html' }, 'BOTTOM': { template: '<h2>Bottom</h2>
  • angularjs 中的选项卡无法与 UI-Router 和 UI-bootstrap 一起正常工作(Tabs in angularjs not working properly with UI-Router and UI-bootstrap)
    问题 我使用的是 MEAN.js 样板,你可以在这里找到完整的代码。 在从列表中选择一篇文章后,我尝试向呈现的页面添加 2 个新选项卡。 对于这个任务,我决定同时使用 UI-Router 和 UI-Bootstrap for Angular.js。 这两个选项卡无法正常工作,我可以在它们之间切换并正确查看它们的内容,但有时当我返回并选择文章列表菜单项时,我会看到一个带有 2 个选项卡的空白页面,没有其他内容。 以下是对 view-article.client.view.html 文件的更改,以包含 2 个新选项卡(之前的内容已复制到包含新选项卡部分的 2 个文件中): <div ng-controller="ArticlesController"> <tabset> <tab ng-repeat="t in tabs" heading="{{t.heading}}" select="go(t.route)" active="t.active"> </tab> </tabset> <div ui-view></div> </div> 我已将这几行代码插入到文章控制器中: $scope.tabs = [ { heading: 'SubA', route:'viewArticle.SubA', active:false }, { heading: 'SubB', route
  • Angular UI-Routing,页面刷新时自动重定向到父状态(Angular UI-Routing, Page automatically redirects to parent state when refreshed)
    问题 我正在开发一个使用 Angular-UI 路由的项目。 当我尝试刷新网页或直接输入 URL 时,它被重定向到父状态。 它确实加载了我重新加载的 URL 的状态,然后快速重定向到父状态。 这是我的状态路由 $stateProvider .state('home', { url: "", views: { "home": { templateUrl: root_url + "home" }, }, }) .state('home.store', { url: "/store", views: { "store": { templateUrl: root_url + "store" }, }, }) .state('home.store.storecontent', { views: { "storecontent": { templateUrl: root_url + "storecontent" } } }) 假设目前我处于 home.store.storecontent 状态。 如果我在这里刷新页面,在重新加载当前状态后,它会将我重定向到主状态。 我想避免这种情况。 回答1 我们一般有两种选择。 首先是为孩子定义url ,第二个是 - 使父抽象,这意味着它是默认的。 第一种方法有一个工作示例 如果我们想让父 'home.store' 和子 'home.store
  • AngularJS-单个模板中的多视图(AngularJS - Multiple ng-view in single template)
    问题 我正在使用AngularJS构建动态Web应用程序。 一个模板上可以有多个ng-view吗? 回答1 您只能拥有一个ng-view 。 您可以通过几种方式更改其内容:ng-include,ng-switch或通过routeProvider映射不同的控制器和模板。 回答2 UI-Router是一个可以提供帮助的项目:https://github.com/angular-ui/ui-router它的功能之一是多命名视图 UI-Router具有许多功能,如果您正在使用高级应用程序,我建议您使用它。 在此处检查“多个命名视图”的文档。 回答3 我相信您只要拥有一个ng-view就可以实现。 在主模板中,您可以为子视图提供ng-include部分,然后在主控制器中为每个子模板定义模型属性。 这样它们将自动绑定到ng-include部分。 这与具有多个ng-view 您可以查看ng-include文档中提供的示例 在示例中,当您从下拉列表中更改模板时,它将更改内容。 这里假设您有一个主ng-view ,而不是通过选择下拉列表来手动选择子内容,而是像在加载主视图时那样进行操作。 回答4 使用常规的ng-view模块,您不能拥有多个动态模板。 但是,此项目使您能够这样做(查找ui-router )。 回答5 可能有多个或嵌套的视图。 但不是通过ng-view。
  • ui-router:基于用户角色的默认路由(ui-router: default route based on user role)
    问题 我在我的项目中使用 UI 路由器。 我的应用程序的主页由 4 个选项卡组成,每个选项卡路由到不同的模板。 这是我当前的路由代码,我使用 forEach 创建 6 条路由。 ['Draft','Assigned','InProgress','Completed','Rejected','All'].forEach(function (val) { $stateProvider.state({ name: 'root.jobs.list.' + val.toLowerCase(), url: '/' + val.toLowerCase(), views: { 'currentTab': { templateUrl: 'adminworkspace/jobs', controller: 'JobsController' } }, data: { userJobsStatus: val } }); }); 默认情况下,当用户登录时,它会转到“root.jobs.list.draft”。 如何根据登录用户的角色(管理员、用户、文员等)重定向到给定状态。 如果要将属于“工程师”或“首席工程师”角色的所有用户重定向到“root.jobs.list.inprogress” 我最初在控制器中有这个,但正如你所看到的,它不起作用,因为每次我点击一个选项卡时,它总是返回到“root.jobs
  • Angular UI Router - 如何在切换视图时保留视图(Angular UI Router - How to preserve views while switching views)
    问题 我是 Angular 和 UI Router 的新手。 Plunk http://plnkr.co/edit/1wfyrGryfGG5RtXozPFY?p=preview 设置我有三个顶级应用程序导航按钮主页、项目、帮助。 他们使用 Angular UI Router ui-view 指令加载不同的视图 home.html、projects.html 和 help.html。 这很好用。 Projects.html 视图有一个选项卡栏,每个选项卡对应一个项目:D1、D2、D3 等,我使用 url 路由器属性显示相应的项目选项卡。 每次我单击“项目”按钮时,它都会完全重新加载选项卡栏。 我丢失了当前选项卡,希望其中是否有任何嵌套视图。 基本上是 Project.html 的页面内容,也调用控制器。 我通读了 wiki 文档,但无法弄清楚如何实现我所需的功能。 我确定我错过了一些东西。 它会总是重新加载视图吗? 问题:如何避免重新加载项目视图内容,以便我可以在切换到主页之前按原样保留所选选项卡和所有内容。 因为每个项目我都会有很多嵌套的视图和模型。 回答1 我也想要类似的功能,但 ui-router 还不支持它。 我 fork ui-router 支持“并行状态”并提交给项目征求意见。 谈话的要点是 ui-router 最终将支持某种形式的并行状态,但目前还没有。 同时
  • 零件和模板的复杂嵌套(Complex nesting of partials and templates)
    问题 我的问题涉及到如何处理AngularJS应用程序中模板的复杂嵌套(也称为partials )。 描述我的情况的最好方法是使用创建的图像: 如您所见,这有可能成为具有许多嵌套模型的相当复杂的应用程序。 该应用程序是单页的,因此它将加载index.html ,该索引包含DOM中具有ng-view属性的div元素。 对于第1圈,您看到有一个主导航将相应的模板加载到ng-view 。 我是通过将$routeParams传递给主应用程序模块来实现的。 这是我的应用程序中的一个示例: angular.module('myApp', []). config(['$routeProvider', function($routeProvider) { $routeProvider. when("/job/:jobId/zones/:zoneId", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/zone_edit.html' }). when("/job/:jobId/initial_inspection", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/initial
  • 如何在 ui-router 中保留浏览器上的可选状态参数?(How to persist optional state parameter on browser back in ui-router?)
    问题 我有一个父状态,里面有两个孩子的状态,我将根据URL显示一种状态。 在这两种states ,必须使用param1和param2等参数,我在状态定义中使用了 ui-router 的params选项。 状态 $stateProvider.state('tabs.account', { url: '/account', views: { 'content@tabs': { templateUrl: 'account.html', controller: function($scope, $stateParams) { //This params are internally used to make ajax and show some data. $scope.param1 = $stateParams.param1; $scope.param2 = $stateParams.param2; }, } }, params: { param1: { value: null }, //this are optional param param2: { value: null } //because they are not used in url } }); 如果您查看我的路由,则 params 选项并未真正在URL引入,这就是我将其视为可选的原因。 问题 看看 plunkr
  • How to reduce number of 'states' with same 'templateUrl' using Angular Ui-Router
    Well, I need some help about a routing problem with Angular UI-Roter. Well, actually is not a problem, it's more about to reduce code. I have three child states: main.tab1.hello main.tab2.hello main.tab3.hello and they have in common the same 'templateUrl' : 'hello.html' I want to know if is possible to reduce them in only one state, and of course, when I click the button, I don't want to change the URL. Here is my Plunkr: http://plnkr.co/edit/ej7pCo1RRXPTBL6p8dsL Any help would be appreciated.