Question

我已经使用了ui-router的标签和路由页面，现在我已经改变了布局并在侧面导航面板中有按钮，可以在按钮点击时路由到不同的页面。尝试这么多例子后不知道该怎么做。

当用户从导航菜单中点击信息中心时，我需要导航到dashboards.html。

这是我的代码：

<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">       
      <md-list>
      <md-item ng-repeat="item in menu">
        <a>
          <md-item-content md-ink-ripple layout="row" layout-align="start center">
            <div class="inset">
               <ng-md-icon icon="{{item.icon}}"  ></ng-md-icon>
               <md-tooltip   md-direction="right">{{item.title}}</md-tooltip>
            </div>            
           </md-item-content>
           <md-divider></md-divider>
        </a>
      </md-item>
      <md-divider></md-divider>
     <md-item ng-repeat="item in admin">
        <a>
          <md-item-content md-ink-ripple layout="row" layout-align="start center">
            <div class="inset">
              <ng-md-icon icon="{{item.icon}}"></ng-md-icon>
               <md-tooltip   md-direction="right">{{item.title}}</md-tooltip>
            </div>
          </md-item-content>
        </a>
      </md-item>
    </md-list>
</md-sidenav>

以下是Plnker

Answer 1

您可以通过在HTML上创建href来使用ui-sref="stateName()"或ui-sref="stateName({param: 'value'})"，您似乎需要向app.config添加状态（配置阶段），下面是您可以参考的示例

注意

ui-sref永远不会处理按钮，因为它确实创建了href标记动态和href属性与url，这将不适用于按钮元素，所以我建议你在锚点（<a></a>）标签
中包装按钮

示例

$stateProvider .state("stateName": { url: "/stateName/:id", template: "/test.html", controller: 'testCtrl' });

<强> HTML

<a ui-sref="stateName({id: 1})"> <button type="button"> </a>

这会动态创建像``
这样的href标签
<a ng-href="#/stateName/1"> <button type="button"> </a>

参考SO Answer

<强>更新

其他解决方法是你需要编写ng-click事件和ng-click功能，你可以使用$state.go('stateName')重定向任何路线，

您需要更改html菜单代码，如下所示。基本上我添加了ng-click="$parent.navigate(item.icon)"＆amp;在控制器导航中添加新方法将$state.go(stateName)

<强>标记

<md-item ng-repeat="item in menu"> <a> <md-item-content md-ink-ripple layout="row" layout-align="start center" ng-click="$parent.navigate(item.icon)"> <div class="inset"> <ng-md-icon icon="{{item.icon}}" ></ng-md-icon> <md-tooltip md-direction="right">{{item.title}}</md-tooltip> </div> </md-item-content> <md-divider></md-divider> </a> </md-item>

<强>代码

$scope.navigate = function(routeName){ $state.go(routeName) };

Working Plunkr

如何使用带角度的ui-route导航到不同的页面？

1 个答案: