为什么我在使用ui-router时会得到div的重复?

时间:2016-08-13 11:22:13

标签: javascript angularjs routing angular-ui-router angularjs-routing

我写了一个简单的演示来试图理解ui路由器。

但问题是,我在使用ui路由器时遇到了重复的视图。

这是stateProvider部分

app.config(function($stateProvider,$urlRouterProvider){
    $urlRouterProvider.otherwise('/baseView');

    $stateProvider
        .state('baseView',{
            url:"/baseView",
            templateUrl:"baseView.html"
        })

        .state('baseView.empty',{
            abstract: true,
            views:{
                "navBar":{
                    templateUrl:"sideBar.html",
                    controller: "sideCtrl"
                },
                "123":{
                  templateUrl:"content.html"
        }
            }
        })

        .state('baseView.empty.content1',{
            url:'/content1',

            templateUrl:"content1.html"
        })

        .state('baseView.empty.content2',{
            url:'/content2',
            templateUrl:"content2.html"
        })
})

plunker:http://plnkr.co/edit/Rm0Q50GX2GYvqyKnzkKz?p=preview

只要您在plunker中看到预览,就会看到问题。

我认为问题出在状态提供者部分,因为如果我完全删除状态提供者,则没有重复...

1 个答案:

答案 0 :(得分:0)

问题与州定义无关。原因是你加载了angular.js& ui-router.js两次,两次实例化相同的事情。您可以删除其中一个引用,使其正常工作。

Forked Plunkr