angularjs - 如何/何时使用 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 在这里也很有用。

这个假设正确吗？使用 ng-click 代替锚点？
如果是这样，那将如何运作？IE：

<div ng-click="/about">

score 432 · Accepted Answer

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

score 83 · Accepted Answer

这是一个没有人提到的很棒的提示。在该功能所在的控制器中，您需要包含位置提供程序：

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>

score 33 · Accepted Answer

使用自定义属性（通过指令实现）可能是最简洁的方式。这是我的版本，基于@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 的新手，所以可能还有改进的空间。

score 4 · Accepted Answer

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

score 1 · Accepted Answer

我使用ng-click指令来调用一个函数，同时请求路由模板Url，以决定哪个<div>必须在路由模板Url页面内show或hide用于不同的场景。

AngularJS 1.6.9

让我们看一个例子，在路由页面中，我需要 add<div>或 edit <div>，我使用父控制器模型$scope.addProduct和$scope.editProduct布尔值来控制它。

路由测试.html

<!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()">

        <!-- Either use <a>anchor tag or input type=button -->

        <!--<a href="#!TestingPage" ng-click="productOperation('add', -1)">Add Product</a>-->
        <!--<br><br>-->
        <!--<a href="#!TestingPage" ng-click="productOperation('edit', 10)">Edit Product</a>-->

        <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>

测试页面.html

<!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（父），TestingPage.html（路由页面）都在同一个目录中，

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

score 1 · Accepted Answer

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

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

这样你也可以将参数传递给你的路由：https ://stackoverflow.com/a/40045556/838494

（这是我使用 Angular 的第一天。欢迎提供温和的反馈）

score 0 · Accepted Answer

您可以使用：

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

如果你想在href中添加一些动态变量，你可以这样做：

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

其中link是 Angular 范围变量。

score 0 · Accepted Answer

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

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

在你的控制器中，添加 $state 如下：

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

$scope.going = function(){

$state.go('your route');

}

})

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

8 回答 8

Related

Reference