Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Well, since you can currently only have one ngView directive... I use nested directive controls. This allows you to set up templating and inherit (or isolate) scopes among them. Outside of that I use ng-switch or even just ng-show to choose which controls I'm displaying based on what's coming in from $routeParams.</p> <p><strong>EDIT</strong> Here's some example pseudo-code to give you an idea of what I'm talking about. With a nested sub navigation.</p> <p>Here's the main app page</p> <pre><code>&lt;!-- primary nav --&gt; &lt;a href="#/page/1"&gt;Page 1&lt;/a&gt; &lt;a href="#/page/2"&gt;Page 2&lt;/a&gt; &lt;a href="#/page/3"&gt;Page 3&lt;/a&gt; &lt;!-- display the view --&gt; &lt;div ng-view&gt; &lt;/div&gt; </code></pre> <p>Directive for the sub navigation</p> <pre><code>app.directive('mySubNav', function(){ return { restrict: 'E', scope: { current: '=current' }, templateUrl: 'mySubNav.html', controller: function($scope) { } }; }); </code></pre> <p>template for the sub navigation</p> <pre><code>&lt;a href="#/page/1/sub/1"&gt;Sub Item 1&lt;/a&gt; &lt;a href="#/page/1/sub/2"&gt;Sub Item 2&lt;/a&gt; &lt;a href="#/page/1/sub/3"&gt;Sub Item 3&lt;/a&gt; </code></pre> <p>template for a main page (from primary nav)</p> <pre><code>&lt;my-sub-nav current="sub"&gt;&lt;/my-sub-nav&gt; &lt;ng-switch on="sub"&gt; &lt;div ng-switch-when="1"&gt; &lt;my-sub-area1&gt;&lt;/my-sub-area&gt; &lt;/div&gt; &lt;div ng-switch-when="2"&gt; &lt;my-sub-area2&gt;&lt;/my-sub-area&gt; &lt;/div&gt; &lt;div ng-switch-when="3"&gt; &lt;my-sub-area3&gt;&lt;/my-sub-area&gt; &lt;/div&gt; &lt;/ng-switch&gt; </code></pre> <p>Controller for a main page. (from the primary nav)</p> <pre><code>app.controller('page1Ctrl', function($scope, $routeParams) { $scope.sub = $routeParams.sub; }); </code></pre> <p>Directive for a Sub Area</p> <pre><code>app.directive('mySubArea1', function(){ return { restrict: 'E', templateUrl: 'mySubArea1.html', controller: function($scope) { //controller for your sub area. } }; }); </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload