如何/何时使用ng-click调用路由?

假设你正在使用路由:

// 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'
    });
...

在html中，当单击按钮时，您希望导航到关于页面。一种方法是

<a href="#/about">

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

这个假设正确吗?用ng-click代替anchor? 如果是的话，它是如何运作的呢?即:

当前回答

你可以使用:

<a ng-href="#/about">About</a>

如果你想在href中使用一些动态变量，你可以这样做:

<a ng-href="{{link + 123}}">Link to 123</a>

其中link是Angular的范围变量。

2015-09-19 11:33:41

其他回答

使用自定义属性(用指令实现)可能是最简洁的方法。这是我的版本，基于@Josh和@sean的建议。

angular.module('mymodule', [])

// Click to navigate
// similar to <a href="#/partial"> but hash is not required, 
// e.g. <div click-link="/partial">
.directive('clickLink', ['$location', function($location) {
    return {
        link: function(scope, element, attrs) {
            element.on('click', function() {
                scope.$apply(function() {
                    $location.path(attrs.clickLink);
                });
            });
        }
    }
}]);

它有一些有用的特性，但我是Angular的新手，所以可能还有改进的空间。

2013-09-25 02:00:04

记住，如果你使用ng-click进行路由，你将无法右键单击元素并选择“在新选项卡中打开”或按ctrl单击链接。我尝试在导航时使用ng-href。Ng-click更适合用于操作按钮或折叠等视觉效果。但关于我不推荐。如果你改变了路由，你可能需要改变应用程序中的很多地方。有一个返回链接的方法。例: 有关。将此方法放在实用程序中

2015-11-16 12:36:57

这里有一个没人提到的好建议。在函数所在的控制器中，你需要包含位置提供程序:

app.controller('SlideController', ['$scope', '$location',function($scope, $location){ 
$scope.goNext = function (hash) { 
$location.path(hash);
 }

;]);

 <!--the code to call it from within the partial:---> <div ng-click='goNext("/page2")'>next page</div>

2013-06-27 16:12:29

你可以使用:

<a ng-href="#/about">About</a>

如果你想在href中使用一些动态变量，你可以这样做:

<a ng-href="{{link + 123}}">Link to 123</a>

其中link是Angular的范围变量。

2015-09-19 11:33:41

路由监视$location服务并响应URL的更改(通常通过散列)。要“激活”路由，只需更改URL。最简单的方法就是使用锚标记。

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

不需要更复杂的了。然而，如果你必须从代码中完成，正确的方法是使用$location服务:

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

例如，一个按钮可以触发:

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

2013-01-07 19:14:38

如何/何时使用ng-click调用路由?

推荐文章

最新文章

标签