使用参数 ui-router 注入 children

Question

我想将我的 children 视图注入网络。

我已经声明了我的配置：

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

已编辑：

应用程序组件：

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

});

应用模块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>

我已经包含了应用程序模块：当我单击按钮时，我的 url 更改为 /application/(number) 但视图没有更改。

Answer 1

您的应用程序组件中需要：

<ui-view></ui-view>

因为路由器搜索这个放内容

查看官方文档： https://ui-router.github.io/ng1/tutorial/hellogalaxy

使用参数 ui-router 注入 children

injecting children with parameter ui-router

angularjs

angular-ui-router