logo
down
shadow

Issue with the Angular UI router when inheriting from a parent state


Issue with the Angular UI router when inheriting from a parent state

By : user2953850
Date : November 21 2020, 07:31 AM
wish help you to fix your issue What we need here is a target for our child view, we need a setting: template: "" in the parent state definition:
code :
.state('authenticated', {
    abstract: true,
    template: "<ui-view />", // here
    resolve: {
        currentMember: ['$rootScope', '$q', function ($rootScope, $q) {
            return $rootScope.authenticated || $q.reject({unAuthorized: true});
        }]
    }
})
.state('contacts.detail', {
  views: {
    ////////////////////////////////////
    // Relative Targeting             //
    // Targets parent state ui-view's //
    ////////////////////////////////////

    // Relatively targets the 'detail' view in this state's parent state, 'contacts'.
    // <div ui-view='detail'/> within contacts.html
    "detail" : { },            

    // Relatively targets the unnamed view in this state's parent state, 'contacts'.
    // <div ui-view/> within contacts.html
    "" : { }, 

    ///////////////////////////////////////////////////////
    // Absolute Targeting using '@'                      //
    // Targets any view within this state or an ancestor //
    ///////////////////////////////////////////////////////

    // Absolutely targets the 'info' view in this state, 'contacts.detail'.
    // <div ui-view='info'/> within contacts.detail.html
    "info@contacts.detail" : { }

    // Absolutely targets the 'detail' view in the 'contacts' state.
    // <div ui-view='detail'/> within contacts.html
    "detail@contacts" : { }

    // Absolutely targets the unnamed view in parent 'contacts' state.
    // <div ui-view/> within contacts.html
    "@contacts" : { }


Share : facebook icon twitter icon
Angular-ui-router:load one of the child state as default from parent abstract state

Angular-ui-router:load one of the child state as default from parent abstract state


By : Anne
Date : March 29 2020, 07:55 AM
seems to work fine There is a link to working example. I've made few changes, to make it more ui-router like.
Firstly we have to move controller definition from
into state definition:
code :
$stateProvider
  .state('home', {
    abstract: true,
    templateUrl: 'scripts/home.html',
    controller: 'MainCtrl', // here we put together template and controller
  })

.state('home.search', {
  url: '/summary',
  views: {
    'search': {
      templateUrl: "scripts/home/search.html",
      controller: 'SearchCtrl', // here as well
    },
    'summary': {
      templateUrl: "scripts/home/summary.html",
      controller: 'SummaryCtrl', // here also
    }
  }
})
...
.config(['$urlRouterProvider',
    function($urlRouterProvider) {

      $urlRouterProvider.otherwise('/summary');
    }
 ]);
with Angular UI Router, is it possible for the child state to call a function in the parent state's controller?

with Angular UI Router, is it possible for the child state to call a function in the parent state's controller?


By : thomas
Date : March 29 2020, 07:55 AM
it helps some times UPDATE: See this plunkr for solution: http://plnkr.co/edit/xnMDiv
Since you're injecting the ReportsController as 'reports', you can simply define the function within that controller as 'this.function' and then in the child view, use 'reports.function' to access it.
code :
resolve: { myfunction... }
('myfunction')
Angular UI-Router Unable to create a nested state for parent state with url '/' but succeeding incase of parent with url

Angular UI-Router Unable to create a nested state for parent state with url '/' but succeeding incase of parent with url


By : Ahmed Shatnawi
Date : March 29 2020, 07:55 AM
This might help you I believe that the url property is optional and if you remove it from the parent you should be able to navigate to the child without any issues
angular ui-router issue when using parent state with empty string template

angular ui-router issue when using parent state with empty string template


By : Bunty Sheikh
Date : March 29 2020, 07:55 AM
it fixes the issue I think, you need to provide ui-view directive as template for parent state. And you can remove href from your html, since ui-sref does it for you.
Altogether:
code :
$stateProvider
            .state("customer", {
                abstract: true,
                url: "/customer",
                template: '<div ui-view></div>'
            })
            .state("customer.application", {
                url: "/application",
                template: "<application></application>"
            })
            .state("customer.company", {
                url: "/company",
                template: "<company></company>"
            })
<ul>
    <li>
        <a ui-sref="customer.application">APPLICATION</a>
    </li>
    <li>
        <a ui-sref="customer.company">COMPANY</a>
    </li>
</ul>
Angular and ui-router - How to configure nested state within named view in parent state

Angular and ui-router - How to configure nested state within named view in parent state


By : user21671
Date : March 29 2020, 07:55 AM
To fix the issue you can do I ended up removing the line: url: '' from the stc.sections configuration and replaced url: '/' with url: '' in the `state.sections.homepage config. I'm now able to add routes for sibling pages using something like:
code :
        .state('stc.sections.login', {
            url: 'login',
            controller: 'main.common.login as loginCtrl',
            template: require('./views/login.html')
        })
$stateProvider
    .state('stc', {
        abstract: true,
        url: '/',
        views: {
            'shell': {
                 template: '<div ui-view="topbar"></div>' +
                           '<div ui-view="navbar"></div>' +
                           '<div ui-view="content"></div>'
            }
        }
    })
    .state('stc.sections', {
        views: {
            'topbar@stc': {
                template: "<p>top bar</p>"
            },
            'navbar@stc': {
                template: "<p>nav bar</p>"
            },
            'content@stc': {
                template: '<div ui-view></div>'
            }
        }
    })
    .state('stc.sections.homepage', {
        url: '',
        template: '<h1>Nested Home Page Content</h1>'
    })
    .state('stc.sections.login', {
        url: 'login',
        template: '<h1>Login Here</h1>'
    })
Related Posts Related Posts :
  • Unit-test a angular controller function in a directive
  • jQuery Sparkline in a cell in ng-grid using CellTemplate and Directive
  • AngularJS determine filter in controller
  • How to deploy an app using ionic framework to Amazon? (elastic beanstalk prefered)
  • Conditional injection of a service in AngularJS
  • Filtering on object properties not working
  • Open $modal from the service and pass variables to the controller
  • ngClick evaluated against scope instead of isolateScope
  • onEnter and onExit are not called when state is left/activated in angularjs ui router
  • Shared client & server modules with angularjs and pongular
  • Getting the angular app to run when using protractor
  • Angularjs: create a link for download different types of file
  • AngularJS: On Change of Parent DropDown Option Also Changes the Dependant Drop Down Options Associated with Other Parent
  • Angular HTML5 mode, Wordpress, Rewrites, Apache and You
  • Using angular js form validations in <form:input> tag
  • AngularJS call common functions in a directive template
  • AngularJS Promise resolved incorrectly
  • properly clearing whole AngularJS ui-grid chart
  • Can not figure out how to store $rootScope in angular.bootstrap
  • animate.css animation within angularjs 1.3 using ngAnimate gives different animations in Firefox
  • Auth0 IE Issue: Unable to get property 'frames' of undefined or null reference
  • Am I misusing directives with too much logic?
  • Use an Angular JS value as a parameter of TWIG "path" function in Symfony 2
  • multiple function on ng-click angularjs
  • Converting $.ajax call to $http call in angular 404 error
  • Angularjs templateUrl file location not found
  • How to execute the function after change page in angularjs?
  • Pass variable to AngularJS directive without isolated scope
  • OAuth, Custom Login, or Both
  • Angular Directive: Isolate Scope & Transclude is true, but HTML in the directive needs to continue to bind to parent
  • Compare objects in angularjs
  • Combine "Checkbox" & "Avatar" in an Ionic Framework List
  • Is there a way to initialize an Angular Service without DI into controller
  • Why is a parent controller's $scope not accessible from a (child) directive?
  • How to get back button in Ion-tabs page
  • AngularJS bind class attribute to model
  • How can I get AngularJS ui-router to respond correctly to a browser page refresh?
  • Angular validation does not work
  • Breez Create Complex Entities
  • Drag and drop using protractor in dthmlx component
  • In Angular JS, what is the default 'cache' value that is used when sending request with $http service?
  • How to change placeholder for single textbox in angular?
  • $ is not defined - jquery angular mixing
  • CORS issue angularjs and spring security
  • Angularjs cannot select last item in dropdown the first time
  • Angularjs - $watch issue
  • On change radio button to no the span should hide in angular
  • Creating a wordcloud generator in Angularjs
  • Angular UI Bootstrap collapse - whats wrong?
  • AngularJS after redirect from app to app, the default page is not loading
  • Why does my scope update my factory and my factory update my scope when it should not?
  • AngularJS testing $httpBackend.whenGET().respond() not working with number as parameter
  • Setting up Login in Angular App
  • Retrieve value that is stored in db and display in select box using angularjs and laravel
  • Binding nested array in Angular view
  • Using filter with geojson, right direction?
  • Angularjs : mistake with $q
  • Apply logic to every element in an ng-repeat upon ng-click (AngularJS)
  • Directive within a directive fails to bind event
  • Header with image with ionic framework
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org