javascript - $stateProvider AngularJs 不工作

Question

我的页面上有如下按钮:

<button ui-sref=".viewer({maId: gridItem.MAID})" class="btn btn-info">
  <span class="glyphicon glyphicon-search"></span>
</button>

单击后我想使用 ui-sref 更改状态。我目前处于/status 状态，并且我想进入/status/{maId} 状态。

这是我的routes.js

(function () {
    'use strict';

    angular
    .module('MA.status')
    .config(function ($stateProvider) {
        $stateProvider
            .state('status', {
                url: '/status',
                controller: 'Status as vm',
                templateUrl: 'app/pages/status/status.html?v=0.0.1'
            })
            .state('status.viewer', {
                url: '/:maId',
                controller: "Viewer as vm",
                templateUrl: 'app/pages/status/viewer.html?v=0.0.1',
                resolve: {
                    maId: function ($stateParams) {
                      return ($stateParams.id);
                   }
            }
            });
    });
})();

当我单击按钮 url 更改但 html 没有更改时，它仍然是状态状态的 templateUrl，而不是 status/{maId}。控制台中没有错误。

问题是什么？

Answer 1

按钮上的 ui-sref 应该是这样的:

<button ui-sref="status.viewer({maId: gridItem.MAID})" class="btn btn-info">
  <span class="glyphicon glyphicon-search"></span>
</button>

您始终必须插入在 route 声明的完整州名称。

编辑:

如果没有根据您的评论看到整个 HTML 结构，我猜您在状态状态模板中缺少 ui-view 指令。如果您使用子状态，则父级需要拥有它才能显示子级的内容/模板。如果您希望 status.viewer 状态按照您现在的方式工作，则可以将其设置为一个完整的单独状态。但是，如果您希望将其作为子状态，只需将其添加到您的 status 状态中的某个位置，子状态的内容就会出现。

<div ui-view></div>

因此，请更改 ui-sref 并将 ui-view 添加到您的父状态模板中。