AngularJS路由器 - 當父母控制器被點擊時加載

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（舊值爲空）。 reportID屬於home狀態，因此其控制器也被加載。

請注意，url: "/:reportID"處於狀態home.child是可選的。