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在这里也很有用。

这个假设是否正确？是否使用ng-click而不是锚？
如果是这样，那怎么办？ 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的新手，所以可能还有改进的余地。

Answer 4

请记住，如果您使用ng-click进行路由，则无法右键单击该元素并选择“在新选项卡中打开”或按住Ctrl键单击该链接。在导航时我尝试使用ng-href。 ng-click最好用于操作按钮或折叠等视觉效果。但关于我不推荐。如果更改路径，则可能需要在应用程序中进行大量更改。有一个方法返回链接。例如：关于。这个方法放在实用程序中

Answer 5

我使用 ng-click 指令调用函数，同时请求路由templateUrl，以决定哪个<div>必须是show或hide内部路径templateUrl页面或不同的场景。

的 AngularJS 1.6.9

让我们看一个例子，在路由页面中，我需要添加<div>或编辑<div>，我使用父控制器模型$scope.addProduct和{{1}来控制布尔。

<强> RoutingTesting.html

＆＃13;
＆＃13;
$scope.editProduct
＆＃13;
＆＃13;
＆＃13;

<强> TestingPage.html

＆＃13;
＆＃13;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Testing</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.min.js"></script> <script> var app = angular.module("MyApp", ["ngRoute"]); app.config(function($routeProvider){ $routeProvider .when("/TestingPage", { templateUrl: "TestingPage.html" }); }); app.controller("HomeController", function($scope, $location){ $scope.init = function(){ $scope.addProduct = false; $scope.editProduct = false; } $scope.productOperation = function(operationType, productId){ $scope.addProduct = false; $scope.editProduct = false; if(operationType === "add"){ $scope.addProduct = true; console.log("Add productOperation requested..."); }else if(operationType === "edit"){ $scope.editProduct = true; console.log("Edit productOperation requested : " + productId); } //*************** VERY IMPORTANT NOTE *************** //comment this $location.path("..."); line, when using <a> anchor tags, //only useful when <a> below given are commented, and using <input> controls $location.path("TestingPage"); }; }); </script> </head> <body ng-app="MyApp" ng-controller="HomeController"> <div ng-init="init()">     <input type="button" ng-click="productOperation('add', -1)" value="Add Product"/> <br><br> <input type="button" ng-click="productOperation('edit', 10)" value="Edit Product"/> <pre>addProduct : {{addProduct}}</pre> <pre>editProduct : {{editProduct}}</pre> <ng-view></ng-view> </div> </body> </html>
＆＃13;
＆＃13;
＆＃13;

两页 - <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .productOperation{ position:fixed; top: 50%; left: 50%; width:30em; height:18em; margin-left: -15em; /*set to a negative number 1/2 of your width*/ margin-top: -9em; /*set to a negative number 1/2 of your height*/ border: 1px solid #ccc; background: yellow; } </style> </head> <body> <div class="productOperation" > <div ng-show="addProduct"> <h2 >Add Product enabled</h2> </div> <div ng-show="editProduct"> <h2>Edit Product enabled</h2> </div> </div> </body> </html>（父），RoutingTesting.html（路由页面）位于同一目录中，

希望这会对某人有所帮助。

Answer 6

另一种解决方案，但不使用ng-click，即使对于<a>以外的其他标签仍然有效：

<tr [routerLink]="['/about']">

这样您还可以将参数传递到路线：https://stackoverflow.com/a/40045556/838494

（这是我有角度的第一天。欢迎温和的反馈）

Answer 7

您可以使用：

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

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

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

链接是Angular范围变量。

Answer 8

只需执行以下操作在您的html中写：

<button ng-click="going()">goto</button>

然后在您的控制器中，添加$ state，如下所示：

.controller('homeCTRL', function($scope, **$state**) {

$scope.going = function(){

$state.go('your route');

}

})

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

8 个答案: