javascript - Angular.js: change internal view of a template -
i have html pages:
dashboard.html
<div class="wrapper"> <div class="box"> <div class="row row-offcanvas row-offcanvas-left"> <dashboard-sidebar></dashboard-sidebar> <div class="column col-sm-10 col-xs-11" id="main"> <div class="padding" ui-view="main-view"></div> </div> </div> </div> </div>
with change template on "main-view" element:
angular.module("gecodashboard", ["gecodashboardgui", "gecodashboardhome", "gecodashboardblog", "ui.router"]) .config(function ($stateprovider, $urlrouterprovider) { $urlrouterprovider.otherwise('/'); $stateprovider .state('home', { url: '/', views: { 'main-view': { templateurl: 'dashboard-home-view.html', } }, title: "home" }) .state('blog', { url: '/blog', views: { 'main-view': { templateurl:dashboard/views/dashboard-blog-view.html', }, }, title: "articoli" }) }) .run(['$location', '$rootscope', function ($location, $rootscope) { $rootscope.$on('$statechangesuccess', function (event, tostate, toparams, fromstate, fromparams) { if (tostate.hasownproperty('title')) { $rootscope.title = tostate.title; } }); }]);
my question is: if template on "main-view" this:
<h1>section title</h1> <div class="row" ui-view="blog-view"></div>
how can change template on "blog-view"?
solved! on this link found easiest , best solution multiple view.
app.js
var myapp = angular.module('myapp', ["ui.router"]) myapp.config(function($stateprovider, $urlrouterprovider){ // unmatched url, send /route1 $urlrouterprovider.otherwise("/route1") $stateprovider .state('route1', { url: "/route1", templateurl: "route1.html" }) .state('route1.list', { url: "/list", templateurl: "route1.list.html", controller: function($scope){ $scope.items = ["a", "list", "of", "items"]; } }) .state('route2', { url: "/route2", templateurl: "route2.html" }) .state('route2.list', { url: "/list", templateurl: "route2.list.html", controller: function($scope){ $scope.things = ["a", "set", "of", "things"]; } }) })
index.html
<div class="navbar"> <div class="navbar-inner"> <a class="brand" href="#">quick start</a> <ul class="nav"> <li><a ui-sref="route1">route 1</a></li> <li><a ui-sref="route2">route 2</a></li> </ul> </div> </div> <div class="row"> <div class="span12"> <div class="well" ui-view></div> </div> </div>
here code sample solution of problem.
Comments
Post a Comment