路由到子菜单 Angularjs

Question

在这个示例中，我需要的是在 plnkr.co/edit/5FVrydtTPWqYMhhLj03e?p=preview 中，当我单击“联系电话”按钮时，它将重定向到“联系人”中的“联系电话”页面。

我正在使用 Angular JS，希望有人能帮助我。

scotchApp.config(function($routeProvider) {
    $routeProvider

        // route for the home page
        .when('/', {
            templateUrl : 'pages/home.html',
            controller  : 'mainController'
        })

        // route for the about page
        .when('/about', {
            templateUrl : 'pages/about.html',
            controller  : 'aboutController'
        })

        // route for the contact page
        .when('/contact', {
            templateUrl : 'pages/contact.html',
            controller  : 'contactController'
        });
});

感谢 https://scotch.io/tutorials/angular-routing-using-ui-router 因为我正在分叉他们的例子

Answer 1

您的代码显示了一个 ng-route 示例，但您提供的 link 是一个 ui-router 示例。 ($routeProvider 对比 $stateProvider).

如果您使用 angular-ui-router 中的 $stateProvider 来定义您将在整个应用程序中使用的状态，则可能更类似于以下内容:

$stateProvider.state('home', {
  controller: 'mainController',
  url: '/',
  templateUrl: 'pages/home.html'
});
$stateProvider.state('about', {
  controller: 'aboutController',
  url: '/about',
  templateUrl: 'pages/about.html'
});
$stateProvider.state('contact', {
  controller: 'contactController',
  url: '/contact',
  templateUrl: 'pages/contact.html'
});

您看到状态的定义使用字符串来标识自己：例如:'home', 'contact' etc. 你可以使用 ui-router 的 $state 服务，并使用 \[go(to, params, options)\] 方法在状态之间转换结合此标识符。

Convenience method for transitioning to a new state. $state.go calls $state.transitionTo internally but automatically sets options to { location: true, inherit: true, relative: $state.$current, notify: true }. This allows you to easily use an absolute or relative to path and specify only the parameters you'd like to update (while letting unspecified parameters inherit from the currently active ancestor states).

您需要做的就是将其与 maincontroller 中按钮的点击事件相结合。即：将 $state 注入您的 mainController 并将按钮中的 ng-click 耦合到执行 $state.go().

的函数

<button type="submit" ng-click="$state.go('contact')">Contact Numbers</button>

路由到子菜单 Angularjs

Route to Submenu Angularjs

routes

angularjs

angular-ui-router

angularjs-ng-route