如何正确使用NG-查看与AngularJS和角材料MD-标签 [英] How to correctly use ng-View with md-tabs in AngularJS and Angular Material

问题描述

我想在网站上，每个标签重新presents不同的URL采用NG-视图标签决心用角料MD-标签。该网站是在这里：这里。在视觉上它的工作原理，但我注意到页面被装载我每次更改选项卡时的5倍....一次为每个标签的位置。

有没有我需要改变这样做的设置或东西是否正确？

在code的标签情况如下：

 ＆LT; D​​IV CLASS =tabsdemoDynamicHeight＆GT;
        ＆LT; MD-内容类=MD-填充＆GT;
            ＆LT; MD-标签MD-动态高度MD-边框底部MD-选择=的selectedIndex＆GT;
                ＆LT; MD-选项卡标签=特色＆GT;
                    ＆LT; MD-内容类=MD-填充＆GT;
                        ＆LT; D​​IV NG-视图＆gt;＆LT; / DIV＆GT;
                    ＆LT; / MD-含量＆GT;
                ＆LT; / MD-标签＆gt;
                ＆LT; MD-选项卡标签=艺术出售＆GT;
                    ＆LT; MD-内容类=MD-填充＆GT;
                        ＆LT; D​​IV NG-视图＆gt;＆LT; / DIV＆GT;
                    ＆LT; / MD-含量＆GT;
                ＆LT; / MD-标签＆gt;
                ＆LT; MD-选项卡标签=哲学＆GT;
                    ＆LT; MD-内容类=MD-填充＆GT;
                        ＆LT; D​​IV NG-视图＆gt;＆LT; / DIV＆GT;
                    ＆LT; / MD-含量＆GT;
                ＆LT; / MD-标签＆gt;
                ＆LT; MD-选项卡标签=政策＆GT;
                    ＆LT; MD-内容类=MD-填充＆GT;
                        ＆LT; D​​IV NG-视图＆gt;＆LT; / DIV＆GT;
                    ＆LT; / MD-含量＆GT;
                ＆LT; / MD-标签＆gt;
                ＆LT; MD-选项卡标签=联系我们＆GT;
                    ＆LT; MD-内容类=MD-填充＆GT;
                        ＆LT; D​​IV NG-视图＆gt;＆LT; / DIV＆GT;
                    ＆LT; / MD-含量＆GT;
                ＆LT; / MD-标签＆gt;
            ＆LT; / MD-标签＆GT;
        ＆LT; / MD-含量＆GT;
    ＆LT; / DIV＆GT;
 

解决方案

伍视图将刷新每次改变当前路由的时间。另请参阅 ngRoute 文档。
您可以通过为每个标签定制指令避免这种情况，一旦你点击相应的选项卡上谁将会加载所需的模板。

ngView被用作视图DOM中的最高水平，并且特别是使用一次。当您需要加载不同的标签，这是谏使用指令。文档有关的指令，你可以找到这里。

I am trying to use Angular Material md-tabs in a web site where each tabs represents a different url determined using an ng-view tag. The web site is here: here. Visually it works but I'm noticing the pages get loaded 5 times every time I change the tab .... once for each tab location.

Is there a setting or something I need to change to do this correctly?

The code for the tabs is as follow:

       <div class="tabsdemoDynamicHeight">
        <md-content class="md-padding">
            <md-tabs md-dynamic-height md-border-bottom md-selected="selectedIndex">
                <md-tab label="Featured">
                    <md-content class="md-padding">
                        <div ng-view></div>
                    </md-content>
                </md-tab>
                <md-tab label="Art For Sale">
                    <md-content class="md-padding">
                        <div ng-view></div>
                    </md-content>
                </md-tab>
                <md-tab label="Philosophy">
                    <md-content class="md-padding">
                        <div ng-view></div>
                    </md-content>
                </md-tab>
                <md-tab label="Policies">
                    <md-content class="md-padding">
                        <div ng-view></div>
                    </md-content>
                </md-tab>
                <md-tab label="Contact Us">
                    <md-content class="md-padding">
                        <div ng-view></div>
                    </md-content>
                </md-tab>  
            </md-tabs>
        </md-content>
    </div>

解决方案

Ng-view will refresh every time you change the current route. Also see the ngRoute documentation. You can avoid this by creating custom directives for each tab who will load the needed template once you click on the corresponding tab.

ngView is used as the highest level of view in your DOM and is particularly using once. When you need to load different tabs, it is adviced to use directives. Documentation about directives you can find here.

这篇关于如何正确使用NG-查看与AngularJS和角材料MD-标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！