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

我在安圭拉州的工作中得到了奇怪的结果。以下是应用程序代码：

/* 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>

所发生的情况是，只要home state和reportID值的参数在发送的参数和默认状态之间不匹配，当我单击Child时，就会加载home controller。有人能解释一下为什么会这样吗

---

以下是更新后的代码，其工作方式与您期望的一样：

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");
        }
    });
})

您的方法存在问题： 在home状态而不是home.child状态中指定参数reportID

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

请注意，state home.child中的url:/：reportID是可选的