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

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 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 事件，并且您可以使用 $state.go('stateName')、

从 ng-click 函数重定向到任何路由

您需要更改 html 菜单代码，如下所示。基本上我已经添加了 ng-click="$parent.navigate(item.icon)" 并在控制器导航中添加新方法，它将到达 $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 和 angularjs 导航到不同的页面？

How to navigate to different pages using ui-route with angularjs?

angularjs

button

angular-ui-router

angularjs-ng-click