如何/何时使用 ng-click 调用路由? [英] How/when to use ng-click to call a route?

查看:34
本文介绍了如何/何时使用 ng-click 调用路由?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

假设您正在使用路由:

//引导程序myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {$routeProvider.when('/home', {templateUrl: 'partials/home.html',控制器:'HomeCtrl'});$routeProvider.when('/about', {templateUrl: 'partials/about.html',控制器:'关于Ctrl'});...

并且在您的 html 中,您希望在单击按钮时导航到关于页面.一种方法是

...但似乎 ng-click 在这里也很有用.

  1. 这个假设正确吗?使用 ng-click 代替锚点?
  2. 如果是这样,那将如何运作?IE:

Routes 监视 $location 服务并响应 URL 中的更改(通常通过散列).要激活"路由,您只需更改 URL.最简单的方法是使用锚标记.

回家<a href="#/about">转到关于</a>

不需要更复杂的东西.但是,如果您必须从代码中执行此操作,正确的方法是使用 $location 服务:

$scope.go = function ( path ) {$location.path( 路径);};

例如,按钮可以触发:

Suppose you are using routes:

// bootstrap
myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

    $routeProvider.when('/home', {
        templateUrl: 'partials/home.html',
        controller: 'HomeCtrl'
    });
    $routeProvider.when('/about', {
        templateUrl: 'partials/about.html',
        controller: 'AboutCtrl'
    });
...

And in your html, you want to navigate to the about page when a button is clicked. One way would be

<a href="#/about">

... but it seems ng-click would be useful here too.

  1. Is that assumption correct? That ng-click be used instead of anchor?
  2. If so, how would that work? IE:

<div ng-click="/about">

解决方案

Routes monitor the $location service and respond to changes in URL (typically through the hash). To "activate" a route, you simply change the URL. The easiest way to do that is with anchor tags.

<a href="#/home">Go Home</a>
<a href="#/about">Go to About</a>

Nothing more complicated is needed. If, however, you must do this from code, the proper way is by using the $location service:

$scope.go = function ( path ) {
  $location.path( path );
};

Which, for example, a button could trigger:

<button ng-click="go('/home')"></button>

这篇关于如何/何时使用 ng-click 调用路由?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆