$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>

您始終必須插入在您的路線中聲明的整個州名。

編輯：

如果沒有根據您的評論看到整個 HTML 結構，我猜您在狀態狀態模板中缺少ui-view指令。 如果您使用子狀態，則父級需要擁有它才能顯示子級的內容/模板。 如果您希望它以您現在擁有的方式工作，您可以將status.viewer狀態設置為一個完整的單獨狀態。 但是如果你想把它作為子狀態，只需在你的status某個地方添加它，子狀態的內容就會出現。

<div ui-view></div>

因此，更改ui-sref並將ui-view添加到您的父狀態模板。