angularjs - Nested views error - only after refreshing page -
i total beginner angluar.js. want have single page application row of tabs, each of can contain row of tabs, each of contains view.
so, asked this question , accepted answer, had demo @ http://plnkr.co/edit/bubcr8?p=preview.
the demo close, used list instead of second row of tabs, trying modify code. far, have skeleton, proof of concept of nested tabs views. drop real contents in later.
i post code below, here problem:
when drag & drop index,html file browser, works fine. can click around , expect happen seems happen. there not see when moving between tabs left, centre & right; far action on link & link2 of left tab.
seems perfect - until press f5 , refresh page, start geeing errors in js console:
error: not resolve '.link2' state 'left.link1' @ object.t.transitionto (http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js:7:8834) @ object.t.go (http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js:7:8182) @ http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js:7:15639 @ http://code.angularjs.org/1.2.9/angular.js:13585:28 @ completeoutstandingrequest (http://code.angularjs.org/1.2.9/angular.js:4111:10) @ http://code.angularjs.org/1.2.9/angular.js:4418:7 if drag file onto browser, fine again. same behavior in chrome & firefox.
any idea doing wrong?
index.html
<!doctype html> <html ng-app="plunker"> <!-- http://plnkr.co/edit/bubcr8?p=preview --> <head> <meta charset="utf-8" /> <title>nested tabs demo</title> <link data-require="bootstrap-css@*" data-semver="3.0.3" rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" /> <link data-require="font-awesome@*" data-semver="4.0.3" rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" /> <script> document.write('<base href="' + document.location + '" />'); </script> <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.9/angular.js" data-semver="1.2.9"></script> <script data-require="ui-bootstrap@*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script> <script data-require="angular-animate@*" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular-animate.js"></script> <script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script> <!-- our stuff --> <script src="app.js"></script> <script src="controller.js"></script> </head> <body ng-controller="tabs"> <div style="border-style:solid;border-width:1"> <!-- fixme: uses css, not inline style --> <h3>nested tabs demo</h3> </div> <!-- todo: how set initial state & view <span>$state = <b>{{$state.current.name}}</b></span><br> <span>$state url = <b>{{$state.$current.url.source}}</b></span> --> <tabset> <tab> <tab-heading> <a ui-sref="left" ui-sref-active="active">left</a> </tab-heading> </tab> <tab> <tab-heading> <a ui-sref="centre" ui-sref-active="active">centre</a> </tab-heading> </tab> <tab> <tab-heading> <a ui-sref="right" ui-sref-active="active">right</a> </tab-heading> </tab> </tabset> <div class="row"> <br> <div ui-view="viewa"> <!--here content--> </div> </div> </body> app.js
var app = angular.module('plunker', ['ui.bootstrap', 'ui.bootstrap.tpls', 'ui.router']) .run(['$rootscope', '$state', '$stateparams', function ($rootscope, $state, $stateparams) { // it's handy add references $state , $stateparams $rootscope // can access them scope within applications.for example, // <li ng-class="{ active: $state.includes('contacts.list') }"> set <li> // active whenever 'contacts.list' or 1 of decendents active. $rootscope.$state = $state; $rootscope.$stateparams = $stateparams; }]); app.config(function($stateprovider,$locationprovider, $urlrouterprovider) { $urlrouterprovider.otherwise("/"); $locationprovider.html5mode(false).hashprefix('!'); $stateprovider .state('left', { url: "/", views: { "viewa": { template: '<h1>left tab, index.viewa</h1><br></h1><div>' + '<tabset>' + ' <tab>' + ' <tab-heading>' + ' <a ui-sref=".link1">link1</a><br>' + ' </tab-heading>' + ' </tab>' + ' <tab>' + ' <tab-heading>' + ' <a ui-sref=".link2">link2</a></div>' + ' </tab-heading>' + ' </tab>' + '</tabset>' + '<div class="col-xs-6">' + '<div ui-view="viewa.link1"></div>' + '<div ui-view="viewa.link2"></div></div>' }, "viewc": { template: 'left tab, viewc <div ui-view="viewc.link1"></div>' + '<div ui-view="viewc.link2"></div>' } } }) .state('left.link1', { url: 'link1', views: { "viewa.link1": { template: '<h2>viewa nest link1</h2><ul>' + '<li ng-repeat="thing in link1things">{{thing}}</li></ul>', controller: 'tab1link1ctrl', data: {} }, "viewc.link1": { template: 'link1' } } }) .state('left.link2', { url: 'link2', views: { "viewa.link2": { template: '<h2>viewa nest link2</h2><ul>' + '<li ng-repeat="thing in link2things">{{thing}}</li></ul>', controller: 'tab1link2ctrl', data: {} }, "viewc.link2": { template: 'link2' } } }) .state('centre', { url: "/centre", views: { "viewa": { template: '<h1>centre tab, viewa</h1>', controller: '2ndtabctrl', data: {} }, "viewc": { template: 'centre tab, viewc <div ui-view="viewc.list"></div>' } } }) .state('right', { url: "/right", views: { "viewa": { template: '<h1>right tab, viewa</h1>', controller: '2ndtabctrl', data: {} }, "viewc": { template: 'right tab, viewc <div ui-view="viewc.list"></div>' } } }); }); controller.js
app.controller('tabs', ['$scope', '$stateparams', '$state', function($scope, $stateparams, $state) {} ]); app.controller('2ndtabctrl', ['$scope', '$stateparams', '$state', function($scope, $stateparams, $state) {} ]); app.controller('tab1link1ctrl', ['$scope', '$stateparams', '$state', function($scope, $stateparams, $state) { $scope.link1things = ["a", "set", "of", "things", "link1", "viewa"]; } ]); app.controller('tab1link2ctrl', ['$scope', '$stateparams', '$state', function($scope, $stateparams, $state) { $scope.link2things = ["a", "set", "of", "things", "link2", "viewa"]; } ]);
in template youre triggering state '.link1':
<a ui-sref=".link1">link1</a> but havent defined state called '.link1' in state config. have state named 'left.link1'. meant?
p.s. in future create plunkr examples, pain scrolling through multiple files here
Comments
Post a Comment