angularjs - 如何使用 ui-route 和 angularjs 导航到不同的页面？

Question

我已经使用了 ui-router 的选项卡和路由页面，现在我已经更改了布局，并在侧面导航面板中添加了按钮，以便在单击按钮时路由到不同的页面。尝试了这么多例子后不知道该怎么做。

当用户从导航菜单中单击“Dashboard”时，我需要导航到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

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

注意

ui-sref never work on button because it does create href tag dynamically and href attribute with url, this won't work on button element, so i'd suggest you to wrap button inside anchor(<a></a>) tag

示例

$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)" & 请在 Controller 导航中添加新方法，该方法将指向 $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