Question

这是我的app.js：

 // Now set up the states
        $stateProvider
            .state('/', {
                url: "/",
                views: {
                    "top": {
                        templateUrl: 'partials/top.html'
                    },
                    "content": {
                        templateUrl: 'partials/content.html'
                    }
                    ,
                    "footer": {
                        templateUrl: 'partials/footer.html'
                    }
                }
            })

            .state('consultar', {
                url: "/consultar",
                views: {

                    "content": {
                        templateUrl: 'partials/consultar.html'
                    }

                }
            })

在我的top.html中，我有这个部分：

 <li><a href="./#/consultar">Consultar Protocolo <span class="sr-only"></span></a></li>

但是，当我点击链接时，它不仅仅是<div class="content" ui-view="content"></div>，它会改变整个页面（仅显示consultar.html的内容）

为什么呢？

这是我的index.html：

<body>
<div class="top" ui-view="top"></div> //for the navbar
<div class="content" ui-view="content"></div> //for the content of clicked link in navbar
<div class="footer" ui-view="footer"></div> //if i need some extra info 
</body>

Answer 1

请改用ui-sref，因此您的链接如下所示：

<li><a ui-sref="consultar">Consultar Protocolo <span class="sr-only"></span></a></li>

Answer 2

您可以指定咨询视图的父级：

         .state('consultar', {
            url: "/consultar",
                parent: "/",
                views: {

                    "content": {
                        templateUrl: 'partials/consultar.html'
                    }

                }
          })

Angular ui-router重定向，不改变ui-view

2 个答案: