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

243

假设您正在使用路线：

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

  1. 这个假设正确吗？使用ng-click代替锚点？
  2. 如果是这样，那将如何工作？IE浏览器：

<div ng-click="/about">

angularjs  routes  angularjs-routing  angularjs-ng-click  angularjs-ng-route 
— 罗伯特·克里斯蒂安
source
— Blazemonger，2014年
ui-sref看到这个答案：stackoverflow.com/a/21105057/2539811
— Vincil Bishop 2016年

Answers:

430

路由监视$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>
— 乔什·大卫·米勒
source
6
这对我不起作用，而是替换为$ location.hash（hash）;。与$ location.path（hash）; 有用。@sean在另一个答复中建议这样做，由于某些原因，该表决的票数要少得多。
— 质疑阿隆森（Aronsson），
2
@PerQuestedAronsson path和hash服务于两个不同的目的，但根据情况可能具有相同的效果。在大多数情况下，对于严格的路由（尤其是html5mode启用），path将是规范的选择。我更新了答案以反映这一点。
— Josh David Miller
2
@DavidWoods它应该起作用，但前提是基本路径匹配/。如果您是从中提供应用程序的/app/index.html，则此方法将不起作用，因为绝对URL为/app/next.html。同样显然，必须将服务器设置为index.html在命中时返回您的文件/next.html。如果您想让我看一下，请随时发布Plunker / Fiddle。
— Josh David Miller
2
这是非常通用且有用的事情。有没有办法集中化它，还是我们真的必须go向每个控制器添加一个方法？（或使用go方法创建根控制器？）
— Bennett McElwee 2013年
3
@BennettMcElwee我认为到目前为止，最好的方法是只使用锚标记。在这种情况下，button标记没有任何价值，这是造成问题的原因。也就是说，您可以轻松创建一个指令来为您执行此操作，例如：<button click-go="/home">Click</button>。链接功能只能是：element.on("click", function () { $location.path(attrs.clickGo); });
— Josh David Miller
83

这是一个没人提的好提示。在功能所在的控制器中，您需要包括位置提供程序：

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>
— 肖恩
source
2
太感谢了！这个答案对我来说效果更好，因为hash方法将值附加在经过编码的url上，而path方法让我替换了完整的url，这就是我所需要的。谢谢！
— jfplataroti 2013年
8
这是此页面上唯一实际可行的建议解决方案。不知道为什么另一个答案的票数比这个答案要多。
— 根据《阿伦森》的要求，2013年
我正在尝试这个，但是没有用。在将其连接到控制器之前，是否还必须在模块中添加位置？
— Fallenreaper
一旦我对div而不是<a>进行ng-click设置，这对我就起作用了。
— 史蒂夫，
33

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

— 贝内特·麦克埃尔维
source
每次clickLink属性更改时，这不会在元素上创建click事件吗？
— toxaq
@toxaq绝对不是完美的。我怀疑当clickLink属性更改时，该指令将添加新的单击处理程序，但将旧的单击处理程序保留在原处。结果可能有点混乱。我最初编写此代码是为了在clickLink属性永远不会更改的情况下使用，因此我从来不会捆绑这个松散的结局。我认为修复此错误实际上会导致更简单的代码-有空的时候我可能会尝试这样做（哈！）
— Bennett McElwee 2013年
凉。是的，如果您删除了attrs。$观察它会按预期工作。我将在此处粘贴我的版本，但是它不会在注释中格式化，并且实际上与观察部分相同。
— toxaq
@toxaq我已经编辑了代码。我想我已经从其他指令改编了代码，这就是为什么不合适的attrs.$observe地方。感谢您的建议。
— Bennett McElwee
在阅读建议的答案时将建议使用此方法。干净且可重复使用。+1
— 睡鼠
4

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

— 詹斯·阿列纽斯（Jens Alenius）
source
1

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

AngularJS 1.6.9

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

RoutingTesting.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>
展开摘要

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

希望这会帮助某人。

— 阿里夫·穆斯塔法
source
0

您可以使用：

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

如果您想在href内添加一些动态变量，可以采用以下方式：

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

其中link是Angular作用域变量。

— 索海尔xIN3N
source
5
这不能回答OP问题，该问题ng-click用于更改位置。
— jjmontes
0

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

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

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

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

$scope.going = function(){

$state.go('your route');

}

})
— 卢卡斯·穆吉
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.