Create several designated perspectives from a template

Question

Create several designated perspectives from a template

I'm currently working with ui-router and have set up a parent state that includes several child states as shown below:

.state('portfolio.patent', {
    url: '/:patentId',
    controller: 'patentItemCtrl',
    controllerAs: '$ctrl',
    templateUrl: 'app/templates/patent/patent.patent-item.tpl.htm',

})
.state('portfolio.patent.patent-info', {
    templateUrl: 'app/templates/patent/patent.patent-info.tpl.htm',
    url: '/',
    controller: 'patentInfoCtrl',
    controllerAs: '$ctrl'      
})
.state('portfolio.patent.notifications', {
    templateUrl: 'app/templates/notifications/notifications.tpl.htm',
    url: '/',            
    controller: 'notificationsCtrl',
    controllerAs: '$ctrl'
})

In this setup, I aim to load these child states into separate tabs, divided between left and right tabset components like this:

<div class="col-xl-6 ">
    <uib-tabset active="activeLeft">
        <uib-tab index="0" heading="Details" data-ui-sref=".patent-info"></uib-tab>
    </uib-tabset>
    <div ui-view></div> 
</div>
<div class="col-xl-6">
    <uib-tabset active="activeRight">
        <uib-tab index="1" heading="Notifications" data-ui-sref=".notifications"></uib-tab>
    </uib-tabset>
    <div ui-view></div>
</div>

While the current setup partially works by loading content in both views, without named views, the selected tab displays content in both the left and right ui-view elements instead of having patent-info load in the left tabset and notifications in the right tabset.

Question

If I modify the ui-views to be <div ui-view="leftTab> and <div ui-view="rightTab">, what syntax should I use for ui-sref to achieve this?

For instance:

data-ui-sref="@righTab.notifications"

(I realize this is not correct)

javascript angularjs

Answer 1

Answer №1

Your state structures for child views need to be organized properly. Instead of having multiple states, consider having a single parent state with a 'views' property for its children. To demonstrate this concept, here's a simple example: create a controller for each child view, similar to how you would define a regular state (without the 'url' property). Navigation occurs at the parent level, meaning the child views are loaded within their parent.

angular.module('app', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
      .state('parent', {
        url: '/',
        views: {
          'leftTab': {
            template: '<div>This is the left tab</div>'
          },
          'rightTab': {
            template: '<div>This is the right tab</div>'
          }
        }
      });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.22/angular-ui-router.js"></script>
<div ng-app="app">
  <div ui-view>
    <div style="width: 40%; float: left; border: 1px solid black; margin-right: 5px;">
      <div ui-view="leftTab"></div>
    </div>
    <div style="width: 40%; float: left; border: 1px solid black; margin-left: 5px;">
      <div ui-view="rightTab"></div>
    </div>
  </div>
</div>

Answer 2

Your state structures for child views need to be organized properly. Instead of having multiple states, consider having a single parent state with a 'views' property for its children. To demonstrate this concept, here's a simple example: create a controller for each child view, similar to how you would define a regular state (without the 'url' property). Navigation occurs at the parent level, meaning the child views are loaded within their parent.

angular.module('app', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
      .state('parent', {
        url: '/',
        views: {
          'leftTab': {
            template: '<div>This is the left tab</div>'
          },
          'rightTab': {
            template: '<div>This is the right tab</div>'
          }
        }
      });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.22/angular-ui-router.js"></script>
<div ng-app="app">
  <div ui-view>
    <div style="width: 40%; float: left; border: 1px solid black; margin-right: 5px;">
      <div ui-view="leftTab"></div>
    </div>
    <div style="width: 40%; float: left; border: 1px solid black; margin-left: 5px;">
      <div ui-view="rightTab"></div>
    </div>
  </div>
</div>

Create several designated perspectives from a template

Answer №1

Similar questions

Sinon causing 'unsafe-eval' error in Chrome extension unit tests

What is the best way to access data from outside a forEach loop in JavaScript?

What is the correct way to generate a normal map using THREE.js?

Is it possible to pass multiple parameters in one onClick event?

Encountered an issue while attempting to access a property from an undefined source

Toggle the visibility of a hidden div by clicking a button

Implementing a 'Load More' button for a list in Vue.js

Example of material-ui-pickers: Error - Object(...) is not a function

Unable to bind knockout dropdownlist data during an ajax request

Having trouble exporting a variable from one Node.js file to another and finding that the value remains unchanged?

Navigating through error messages in NextJs 14 can be tricky, especially when faced with the dreaded "ReferenceError: document not defined" or "prerendering error". It's vital to pinpoint exactly which page

What is the best way to produce a random integer within the range of 0 and 2

Randomizer File Name Maker

Choosing a specific element within another element of the same type using JQuery

Tips for creating a row template with pinned content

Is it possible to replace JavaScript files that are included in my index page if I am utilizing conditional comments specifically for IE9?

Tips for setting limitations on a date picker's minimum and maximum values on an iPhone using JavaScript

Using jQuery Ajax to Send Values Between Functions and Replace Nulls

Leverage the Express JS .all() function to identify the specific HTTP method that was utilized

What causes the index to consistently be the final index when passing it to the MenuItem onClick function while iterating over a State array using map?