angularjs不同标签页切换 ui-view,且不 刷新页面

发布于 2022-09-02 00:34:20 字数 1121 浏览 16 评论 0

html:

   <div class="nav">
        <div class="nav_container">
            <span ng-repeat="nav in navs" ui-sref-active="li_selected" ui-sref=".{{nav.url}}">
                {{nav.name}}
                <em ng-click="CloseNav(nav.value)"></em>
            </span>
        </div>
    </div>
    <div class="content clearFix" >
        <div ui-view="" ng-style="high" style="overflow:auto;"></div>
    </div>

图片描述

如图所示,点击不同的标签,ui-view区域显示不同的页面。但是在切换页面的同时,会重新刷新页面,我在页面上的操作都会被刷新掉。我想实现大概如:

    <div ui-view="html1" ng-show="html1"></div>
    <div ui-view="html2" ng-show="html2"></div> 
    <div ui-view="html3" ng-show="html3"></div> 
    <div ui-view="html4" ng-show="html4"></div> 

通过不同的标签页来控制不同ui-view的显示,或隐藏,同时保留用户的操作,不用刷新页面。
刚学习angularjs,对ui-view使用不熟练,求大神解答我这思路是不是正确的,能实现的话给出详细的代码;不正确的话,有什么别的办法吗,也请给出详细的代码,谢谢了!!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

深海里的那抹蓝 2022-09-09 00:34:20

设置一个ui-view就够了,只需要对不同的state加载不同的temlpate

罗罗贝儿 2022-09-09 00:34:20

你这个和ui-router无关,普通的页面切换本身就不能保存input里面输入的东西
你可以:

  1. 页面输入的数据,当切换tab时持久化到后端,即切换先保存

  2. 或者保存到service中

  3. 或者保存到localstorage中
    总之找个地方存起来,再切换回来的时候再拿到

另可参考:sof

我纯我任性 2022-09-09 00:34:20

首先,切换tab不需要刷新页面,可以用angular.factory创建一个缓存,数据修改后进行缓存。如果没有用router,想用ng-show控制4个view的显示,可以把ui-view换成include

风吹雪碎 2022-09-09 00:34:20

每个tab对应一个ui-view,每个页面显示在不同的view里面就可以了

烟织青萝梦 2022-09-09 00:34:20

如果是用ui-router的方式,建议你看看这个https://christopherthielen.gi...

小耗子 2022-09-09 00:34:20

angular.factory创建一个缓存,数据修改后进行缓存,@prototype

使用缓存,这思路不错,我学习了

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文