$ stateProvider angularJs不起作用

时间:2016-09-09 06:45:13

标签: javascript angularjs

我的页面上有按钮,如下所示:

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

点击我想用ui-sref改变状态。我目前处于州/州,我想进入/ 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。控制台中没有错误。

问题是什么?

1 个答案:

答案 0 :(得分: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添加到您的父状态模板。