Angularjs:多个联网的ui-views

时间:2018-01-05 08:52:31

标签: angularjs

美好的一天,我对angularjs路由有更多的疑问。 ui-sref如何在嵌套的angularjs视图中工作。我在下面的代码中嵌套视图没有问题,问题是当我开始在这些视图中使用ui-sref时。

当我点击“Child State”标签时,我的目标是将ui-view =“child1”的内容从child.html模板更改为“thirdChild”状态模板,因为你可以看到我把ui-sref放在那里,尽我所能,但不知何故它不起作用。希望有人能提前帮助我。

HTML文件:

index.html:
<div ui-view></div> <!-- Parent view -->

<!-- parent content -->
parent.html 
<h1>Parent State</h1>
<div ui-view="child1"></div> <!-- Child view -->
<div ui-view="child2"></div> <!-- Child view -->

<!-- child content -->
child.html
<h1 ui-sref="parent.child.third">Child State</h1>

<!-- child content -->
child1.html
<h1>Another Child State</h1>

My Angular Routing:

    var parentState = {
        name: "parent",
        url: "/",
        templateUrl: "src/views/parent.html"
    }

    var childState = {
        name: "parent.child",
        url: "child",
        views: {
           'child1':{ name: "parent.child.child1", templateUrl: "src/views/child.html" },
           'child2':{ templateUrl: "src/views/child2.html" }
        },
        title: "Login Page",
    }

    var thirdChild = {
        name: "parent.child.third",
        url: "/child3",
        template: "<h1>Another Child</h1>"
    }

    $stateProvider
    .state(parentState)
    .state(childState)
    .state(thirdChild);

0 个答案:

没有答案