$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 没有更改时，它仍然是来自状态状态而不是 status/{maId} 的 templateUrl。控制台没有错误。

有什么问题？

Answer 1

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

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

您始终必须插入在您的路线中声明的整个州名。

编辑：

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

<div ui-view></div>

所以更改ui-sref 并将ui-view 添加到您的父状态模板中。