ルートを使用しているとします。
// 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が役に立つでしょう。
<div ng-click="/about">
ルートは$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の新機能なので、おそらく改善の余地があります。
ルーティングにng-clickを使用している場合は、要素を右クリックして[新しいタブで開く]または[Ctrl]キーを押しながらリンクをクリックすることはできません。ナビゲーションに来るとき私はng-hrefを使用しようとします。 ng-clickは操作や折りたたみのような視覚効果のためのボタンに使うのが良いです。しかし、私はお勧めしません。あなたがルートを変更するならば、あなたはアプリケーションの多くの場所で変更する必要があるかもしれません。リンクを返すメソッドがあります。 ex:についてあなたがユーティリティに置くこの方法
別の解決策ですがng-clickを使わずに<a>
以外のタグでも動作します:
<tr [routerLink]="['/about']">
こうすればあなたのルートにパラメータを渡すこともできます: https://stackoverflow.com/a/40045556/838494
(これは角度のある私の最初の日です。穏やかなフィードバックは大歓迎です)
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>
両方のページ-RoutingTesting.html
(親)、TestingPage.html
(ルーティングページ)は同じディレクトリにあり、
これが誰かを助けることを願っています。
あなたが使用することができます:
<a ng-href="#/about">About</a>
href の中に何らかの動的変数が欲しいなら、このようにすることができます:
<a ng-href="{{link + 123}}">Link to 123</a>
link はAngularスコープ変数です。
あなたのhtml書き込みで以下のようにそれをしてください:
<button ng-click="going()">goto</button>
そしてあなたのコントローラで、次のように$ stateを追加します。
.controller('homeCTRL', function($scope, **$state**) {
$scope.going = function(){
$state.go('your route');
}
})