如何/何时使用ng-click来呼叫路由？

Question

假设您正在使用路线:

// 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中,您希望在单击按钮时导航到about页面.一种方法是

<a href="#/about">

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

1. 这个假设是否正确？使用ng-click而不是锚点？
2. 如果是这样,那将如何运作？IE:

<div ng-click="/about">

Answer 1

路由监视$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>

Answer 2

这是一个没人提到的好建议.在函数所在的控制器中,您需要包含位置提供程序:

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>

Answer 3

使用自定义属性(使用指令实现)可能是最干净的方法.这是我的版本,基于@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的新手,所以可能还有改进的余地.