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

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

<div ng-click="/about">

362301 次浏览
小开
最佳答案

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

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

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

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

小开

你可以使用:

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

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

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

其中链接是Angular的范围变量。

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

中
小开

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

< >强AngularJS 1.6.9 < / >强

让我们看一个例子，当在路由页面，我需要添加<div>或编辑<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>

both page - RoutingTesting.html(父)，TestingPage.html(路由页)在同一目录，

希望这能帮助到一些人。

小开

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

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

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

(这是我第一天使用angular。欢迎温和的反馈)

小开

就像下面这样做 在你的HTML写:

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

在你的控制器中，按如下方式添加$state:

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


$scope.going = function(){


$state.go('your route');


}


})

提交答案