Question

我有一个相当奇怪的问题。我在我的应用程序中处于某种状态，当我单击链接转换到另一个状态时，只调用$ stateChangeStart，没有别的。我正在记录所有其他函数：$ stateNotFound，$ stateChangeError，$ stateChangeSuccess并且没有调用它们。

这是我的$ stateChangeStart函数：

$rootScope.$on('$stateChangeStart', function(evt, to, params) {
        console.log(to)
        console.log(evt)
        console.log(params);
 });

输出是：

app.js:xx Object {url: "/area/:id", templateUrl: "something.html", controller: "venuesAreaController", params: Object, name: "venues.area"} controller: "venuesAreaController" name: "venues.area" params: Object templateUrl: "something1.html" url: "/area/:id" __proto__: Object
app.js:xx Object {name: "$stateChangeStart", targetScope: l, defaultPrevented: false, currentScope: l}

基本上它的行为类似于使用$ state.go（）调用的任何状态更改事件，但只调用start函数。我很困惑。我从哪里开始修复此问题？（请注意，这只发生在我直接访问页面后的第一次单击时，URL中有一些嵌套状态，当我浏览页面时通常一切都很好。）

以下是我的州配置示例：

    .state("venues", {
        abstract: false,
        url:"/venues",
        templateUrl:"templates/venues.html",
        //redirectTo: 'venues.all',
        controller: "venuesController"
    })
        .state("venues.all", {
            url:"/all", templateUrl:"templates/venues_partials/all_areas.html",
            controller: "venuesAllController",
            params: {picker: null}
        })
        .state("venues.area", {
            url:"/area/:id",
            templateUrl:"templates/venues_partials/selected_area.html",
            controller: "venuesAreaController",
            params: {picker: null}
        })
        .state("venues.venue", {
            url:"/venue/:id", templateUrl:"templates/venues_partials/selected_venue.html",
            controller: "venuesVenueController",
            //redirectTo: 'venues.venue.overview',
            params: {picker: null}
        })
            .state("venues.venue.overview", {
                url:"/overview", templateUrl:"templates/venues_partials/selected_venue_partials/overview.html",
                controller: "venuesVenueOverviewController"
            })
            .state("venues.venue.categories", {
                url:"/categories", templateUrl:"templates/venues_partials/selected_venue_partials/category_performance.html",
                controller: "venuesVenueCategoriesController"
            })
            .state("venues.venue.problems", {
                url:"/problems", templateUrl:"templates/venues_partials/selected_venue_partials/problem_management.html",
                controller: "venuesVenueProblemsController"
            })
            .state("venues.venue.reviews", {
                url:"/reviews", templateUrl:"templates/venues_partials/selected_venue_partials/review_history.html",
                controller: "venuesVenueReviewsController"
            })
            .state("venues.venue.information", {
                url:"/information", templateUrl:"templates/venues_partials/selected_venue_partials/venue_information.html",
                controller: "venuesVenueInformationController"
            })

我的主菜单是使用常规链接完成的，其他两个嵌套状态是使用bootstrap的tabset完成的：

<tabset>
    <tab
        ng-repeat="(index, t) in tabs"
        heading="{{t.heading}}"
        select="go(t.route, t.params)"
        active="t.active">
        <div ng-if="t.active" ui-view></div>
    </tab>
</tabset>

Answer 1

请修正错误并试一试，例如

.state("venues.all", {
            url:"/all", templateUrl:"tpl2.html",
            controller: "venuesAllController",
        })

不会工作，你必须删除第二个＆＃39;。这听起来像是编译错误（还有隐藏的错误，这些错误未在控制台中显示）。如果仍然发生奇怪的状态，请检查并重新开始。

Answer 2

看来tabset中的ng-if是问题所在。我使用了ng-show，现在所有点击都在工作。

<div ng-if="t.active" ui-view></div>

AngularJS ui-router状态改变

2 个答案: