Parts of page as subviews in Angular

后端未结

关注

 5  1589

傲寒

I have the following problem to solve:

$\"enter$

From within local menu (menu on

相关标签:

5条回答

予麋鹿

2020-12-24 03:15

You want to use nested states in with ui-router. Something like this

$stateProvider
    .state('home', {
            templateUrl: 'views/home.html',
            url: '/home',
            controller: 'homeCtrl'
        })
    .state('home.localmenu1', {
        templateUrl: 'views/localmenu1.html',
        url: '/home/local1',
        controller: 'local1Ctrl'
    })
    .state('home.localmenu2', {
        templateUrl: "views/localmenu2.html",
        url: '/home/local2',
        controller: 'local2Ctrl'
    })
    .state('products', {
        templateUrl: 'views/products.html',
        url: '/products',
        controller: 'productsCtrl'
    })

So inside your "views/home.html" you can put an element with the ui-view directive. Then this element will contain the views of the sub-states (home.localmenu1, home.localmenu2).

0 讨论(0)

南笙

2020-12-24 03:27

For local menus where URL bar is not important I often use ng-include without ng-view:

<script id="view1" type="text/ng-template">
    <div ng-controller="View1Ctrl">
      Hello view1.
    </div>
</script>
<script id="view2" type="text/ng-template">
    <div ng-controller="View2Ctrl">
      Hello view2.
    </div>
</script>

<ul class="menu" ng-init="template='view1'">
   <li><button ng-click="template='view1'">view1</button></li>
   <li><button ng-click="template='view2'">view2</button></li>
</ul>

<div ng-include src="template"></div>

0 讨论(0)

死守一世寂寞

2020-12-24 03:28
Somewhat similar to kseb's answer, if you prefer to use out-of-the-box Angular, you can use ng-include for this. By attaching a controller you can change what you want shown there as easily as you can for any other "real" view.

If you create a menu.html file in your /views:
```
<li ng-repeat="menu in menus">
    <a href="{{menu.link}}">{{menu.name}}</a>
</li>
```
You can include it in your index.html like this:
```
<body>
    <ul ng-include="views/menu.html" ng-controller="MenuCtrl"></ul>
    <div class="container" ng-view></div>
</body>
```
That does the trick and is fully valid, works in all browsers. The controller can be just like any other controller you might use.
0 讨论(0)
发布评论:

提交评论
- 加载中...
逝去的感伤

2020-12-24 03:32

You can indeed and it's quite easy.

Check out ui-router's documentation, especially the code examples and plunker in the section about nested states and views.

0 讨论(0)
发布评论:

提交评论
- 加载中...

不要未来只要你来

2020-12-24 03:36

As long as your ng-view does not require sub view rendering with url route changes, you can use ng-view

Look at this answer AngularJS application multiple pages

If this is your html

<body ng-app>
    <div id='topNav' ng-include='templateUrl' ng-controller='topNavController'></div>
    <div id='left' ng-include='templateUrl' ng-controller='leftNavController'></div>
    <div ng-view>
</body>

Your routes can he defined like this

#/home   //home `ng-view`
#/products   //product list `ng-view`
#/products/1  // product details `ng-view`
#/products/1/feedback   //product 1 feedback `ngview`

You ng-view is replace with each route change.

0 讨论(0)