Question

我在与AngualarJS州合作时遇到了奇怪的结果。这是应用代码：

/* myApp module */
var myApp = angular.module('myApp', ['ui.router'])
.config(function ($stateProvider) {

$stateProvider.state('home', {
    url: "home",
    template: '<div ui-view><h3>Home</h3><a ui-sref="home.child({reportID:1})">Child</a></div>',
    params: { reportID: null },
    controller: function ($scope) {
        $scope.homeCtrlVar = "home";
        console.log("Home controller loaded");
    }
}).state('home.child', {
    template: '<div><h3>Child</h3><a ui-sref="home">Back</a></div>',
    controller: function ($scope) {
        $scope.childCtrlVar = "child";
        console.log("Child controller loaded");
    }
});
})

 .controller('MainCtrl', function ($scope, $state) {
 console.log("MainCtrl initialized!");

 $state.go("home");
 });

主页：

<div ng-app="myApp" ng-controller="MainCtrl">
 <h2>My app</h2>

<div ui-view></div>

发生的事情是，只要家庭状态和reportID值的参数在发送的参数和状态默认值之间不匹配，我点击Child时就会加载家庭控制器。有人可以解释为什么会这样吗？

Fiddle

Answer 1

以下是更新的代码，它按预期运行：

var myApp = angular.module('myApp', ['ui.router'])
.config(function ($stateProvider) {

    $stateProvider.state('home', {
        url: "home",
        template: '<div ui-view><h3>Home</h3><a ui-sref="home.child({reportID:1})">Child</a></div>',       
        controller: function ($scope) {
            $scope.homeCtrlVar = "home";
            console.log("Home controller loaded");
        }
    }).state('home.child', {
        url: "/:reportID",
        params: { reportID: null },
        template: '<div><h3>Child</h3><a ui-sref="home">Back</a></div>',
        controller: function ($scope) {
            $scope.childCtrlVar = "child";
            console.log("Child controller loaded");
        }
    });
})

您的方法有问题：在params reportID州而不是home州指定home.child。

当用户点击home.child({ reportId: 1})时，它应该加载home.child，这很好，并且正在使用旧方法。
但是，如果您注意到，当您单击home.child({ reportId: 1})时，您将发送新参数reportID（旧值为null）。 reportID属于home状态，因此其控制器也已加载。

请注意，州url: "/:reportID"中的home.child是可选的。

AngularJS路由器 - 单击子项时加载父控制器

1 个答案: