javascript - Synchronizing nested views in Angular ui-router -
my "root" state includes 2 views exist entirety of application:
//index.html <body ui-view> <under-pane ui-view = "underpane"></div> <over-pane ui-view = "overpane"></div> </body> the underpane , overpane directives have templates include static elements present in states, , each includes own ui-view.
//directives.js .directive('overpane', function(){ template: '<div ... ><div ui-view="overpaneview"></div></div>' //... }).directive('underpane', function(){ template:'<div ... ><div ui-view="underpaneview"></div></div>' //... }) these "nested" ui-views primary targets of application states, each of loads different element each of them:
//app.js }).state('foo', { views: { 'overpaneview@':{ } //loaded ui-view nested in overpane directive 'underpaneview@' : { } }) what might cleanest way keep these views synchronized in each state?
understand it, can't use controllers on states, because controllers not instantiated unless templates loaded, , templates overridden when state has views property.
that said, i'm attracted resolve function of ui-router, , i'm thinking of organizing strategy around it:
each state's resolve function determines data needed based on state parameters, injects data separate controllers each view, will instantiated views.
if put data either in service or on shared scope, can use two-way data-binding keep 2 views in sync.
right?
are there pitfalls might overlooking method?
is there simpler method i'm overlooking?
would consider "angular way" of doing this?
(i'm doing learning exercise try wrap head around angular)
you run work, if want have states , data synced.
maybe put logic of 2 subviews 1 controller.
index.html
<body> <div data-ng-view> </div> </body> route config:
$routeprovider .when(routes.login, { templateurl: 'dashboard.html', controller: 'dashboardcontroller' }) the view (dashboard.html):
<div ng-include="templateofoverpaneview"></div> <div ng-include="templateofunderpaneview"></div> the dashboardcontroller contain logic both views. $scope within controller available both included templates.
this approach remove necessity of sync states , data.
Comments
Post a Comment