用參數ui-router注入兒童

Question

我想將我的孩子視圖注入到網絡中。

我宣佈我的配置：

var states = [ 
    { 
     name: 'application', 
     url: '/application', 
     component: 'application' 
    }, 
    { 
     name: 'application.detail', 
     url: '/:id', 
     component: 'applicationInfo' 
    } 
]; 

// Loop over the state definitions and register them 
states.forEach(function(state) { 
    $stateProvider.state(state); 
}); 

我有一個按鈕，它試圖？注入視圖

 <button type="button" ui-sref="application.detail({id: application.id})" class="btn btn-sm btn-danger"> 
      <i class="glyphicon glyphicon-info-sign"> 
      </i> 
     </button> 

，並且組件：

angular.module('crudModule').component('applicationInfo', { 
template: '<h1>hellllooooooooo</h1>', 
controller: function($stateParams) { 
    } 
}); 

EDITED：

應用組件：

angular.module('crudModule').component('application', { 
templateUrl: 'applicationModule.html', 

controller: function($http, $scope, httpService, $cookies, $log, $document, $dialogs) { 
    httpService.httpGetRequest('http://localhost:8080/applications').then(function success(response) { 
     $scope.applications = response.data; 
     $scope.displayedApplications = [].concat($scope.applications); 
    }) 

    $scope.deleteApplication = function (id) { 
     $http({ 
      method: 'DELETE', 
      url: "http://localhost:8080/application/" + id, 
     }).then(function success(response) { 
       httpService.httpGetRequest('http://localhost:8080/applications').then(function success(response) { 
       $scope.applications = response.data; 
       $scope.displayedApplications = [].concat($scope.applications); 
      })}) 
    }; 
} 

}）;

applicationModule HTML：

<table st-table="applications" st-safe-src="displayedApplications" class="table table-striped" style="width: auto;"> 
    <thead> 
    <tr> 
     <th st-sort='id'>Id</th> 
     <th st-sort='name'>Name</th> 
    </thead> 
    <tbody> 
    <tr ng-repeat="application in applications"> 
     <td>{{application.id}}</td> 
     <td>{{application.name}}</td> 
     <td>More info 
      <button type="button" ui-sref="application.detail({id: application.id})" class="btn btn-sm btn-danger"> 
       <i class="glyphicon glyphicon-info-sign"> 
       </i> 
      </button> 
     </td> 
    </tr> 
    </tbody> 
</table> 
<div class="form-group"> 
    <button class="btn btn-primary" ui-sref="addApplication">Add new</button> 
</div> 
<div class="form-group"> 
    <button type="button" class="btn btn-default" ng-click="open()">Open me!</button> 
</div> 

我已經包含了應用模塊： 當我點擊按鈕我的網址更改/應用/（號），但觀點不會改變。

Answer 1

你需要在你的應用程序組件：

<ui-view></ui-view> 

由於路由器搜索這把內容。

檢查這個公報文檔： https://ui-router.github.io/ng1/tutorial/hellogalaxy