How do I use routing to load/update multiple views/templates? According to my reading, it is not possible to load multiple partials at the same time with angular routing. So how do you manage this? If the application is a bit more complex then a blog then you'd want to change few places at the same time when the route changes.
This is the html sample:
<!DOCTYPE html>
<html>
<body ng-app='Basal' ng-controller="MainCtrl">
<header>
<div>
<nav id='main-menu'>
<ul>
<li ng-click="menuItem('tables')"> Tables </li>
.....
</nav>
</div>
<div id='context-menu' ng-include="contextMenu"> </div>
</header>
<main ng-view></main>
</body>
</html>
So I need to load the main app via ng-view and submenu for this app via ng-include in the header.
Not sure if this is the right way to do this but it works and allows me to load many templates at the same time.
I'd use a function from the main menu that loads the app like <li ng-click="menuItem('tables')"> Tables </li> and then pass it through the switch in the main controller. Like this:
$scope.contextMenu = '';
$scope.menuItem = function (i) {
switch (i) {
case 'tables':
$location.path('/tables');
$scope.contextMenu = '/views/tables/tables-menu.html';
break;
default:
.....
}
}
Please, let me know if this is acceptable way to do it as this might be the cause of my problem.
Now, both templates are set to be under the same controller. The controller for ng-view template is set in the when function of $routeProvider and the controller for the ng-include template is set with ng-controller like so:
<div class='app-ctrl' id='tables-ctrl' ng-controller="TablesCtrl">
<nav class='app-menu'>
<ul>
<li ng-click="newTable()"> Create </li>
<li ng-click="editTable()"> Edit </li>
<li ng-click="delTable()"> Delete </li>
<li ng-click="testTable()"> Test </li>
</ul>
</nav>
<div><button class='search'>Search</button></div>
</div>
This template just loads the control buttons for the app.
Both views have the same controller - TablesCtrl
In the TablesCtrl controller I process the button clicks.
For instance
$scope.testTable = function() {
$scope.test = "blah";
}
The $scope.test is only visible from the top template where I set the ng-click directives. Why? If both templates are governed by the same controller why do I see the set variable in one template but not in the other?
How can I make buttons in one template process the scope in the other. I thought that putting two views under the same controller would do it but it obveously does not. I understand from the docs that two views get separate scope but I thought that the same controller would make it accessible.
What is the best way to do it if I want to load the buttons in one template but the data they effect and process in the other template?
Sorry if it is not clear but I was struggling how to explain my confusion. I am new to both Angular and JavaScript.
Thanks.
