Bagaimana / kapan menggunakan ng-klik untuk memanggil rute?

243

Misalkan Anda menggunakan rute:

// 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'
    });
...

Dan di html Anda, Anda ingin menavigasi ke halaman about ketika sebuah tombol diklik. Salah satu caranya

<a href="#/about">

... tapi sepertinya ng-klik juga akan berguna di sini.

  1. Apakah anggapan itu benar? Ng-klik itu digunakan, bukan jangkar?
  2. Jika demikian, bagaimana cara kerjanya? YAITU:

<div ng-click="/about">

angularjs routes angularjs-routing angularjs-ng-click angularjs-ng-route Robert Christian
sumber
kemungkinan duplikat dari Bagaimana cara mengalihkan tampilan di AngularJS dari fungsi pengontrol?
Blazemonger
ui-sref Lihat jawaban ini: stackoverflow.com/a/21105057/2539811
Vincil Bishop

Jawaban:

430

Rute memantau $locationlayanan dan merespons perubahan URL (biasanya melalui hash). Untuk "mengaktifkan" rute, Anda cukup mengubah URL. Cara termudah untuk melakukannya adalah dengan tag jangkar.

<a href="#/home">Go Home</a>
<a href="#/about">Go to About</a>

Tidak ada yang lebih rumit yang dibutuhkan. Namun, jika Anda harus melakukan ini dari kode, cara yang tepat adalah dengan menggunakan $locationlayanan:

$scope.go = function ( path ) {
  $location.path( path );
};

Misalnya, tombol mana yang dapat memicu:

<button ng-click="go('/home')"></button>
Josh David Miller
sumber
6
Yang ini tidak berhasil untuk saya, tetapi dengan mengganti $ location.hash (hash); dengan $ location.path (hash); berhasil. Ini disarankan oleh @sean dalam balasan lain, yang memiliki suara jauh lebih sedikit untuk beberapa alasan.
Per Quested Aronsson
2
@ PerQuestedAronsson pathdan hashmelayani dua tujuan berbeda tetapi tergantung pada keadaan dapat memiliki efek yang sama. Untuk sebagian besar kasus, untuk perutean yang ketat (terutama dengan yang html5modediaktifkan), pathakan menjadi pilihan kanonik. Saya memperbarui jawaban untuk mencerminkan ini.
Josh David Miller
2
@ DavidWoods Seharusnya berfungsi, tetapi hanya jika jalur dasar cocok /. Jika Anda melayani aplikasi dari /app/index.html, maka ini tidak akan berfungsi karena URL absolutnya /app/next.html. Tentunya juga, server harus diatur untuk mengembalikan index.htmlfile Anda ketika menekan /next.html. Jangan ragu untuk mengirim Plunker / Fiddle jika Anda ingin saya melihatnya.
Josh David Miller
2
Ini adalah hal yang sangat umum dan berguna untuk dilakukan. Apakah ada cara untuk memusatkannya, atau apakah kita benar-benar harus menambahkan gometode ke setiap pengontrol? (Atau buat pengendali root dengan gometode?)
Bennett McElwee
3
@BennettMcElwee Saya pikir sejauh ini pendekatan terbaik adalah dengan menggunakan tag anchor; tag tombol tidak memberikan nilai dalam kasus ini dan itulah yang menyebabkan masalah. Yang mengatakan, Anda bisa dengan mudah membuat direktif untuk melakukan ini untuk Anda, misalnya: <button click-go="/home">Click</button>. Fungsi tautan hanya akan seperti ini:element.on("click", function () { $location.path(attrs.clickGo); });
Josh David Miller
83

Berikut ini tip yang bagus yang tidak disebutkan siapa pun. Di pengontrol tempat fungsi berada, Anda harus menyertakan penyedia lokasi:

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>
sean
sumber
2
keren Terimakasih! jawaban ini bekerja lebih baik untuk saya, karena metode hash menambahkan nilai pada url (dikodekan) dan metode path izinkan saya mengganti url penuh, itulah yang saya butuhkan. Terima kasih!
jfplataroti
8
Ini adalah satu-satunya solusi yang disarankan pada halaman ini yang benar-benar berfungsi. Tidak tahu mengapa jawaban lain memiliki suara lebih banyak dari yang ini ..?
Per Quested Aronsson
Saya mencoba ini, tetapi tidak berhasil. Apakah saya harus menambahkan lokasi ke modul juga sebelum melampirkannya ke controller?
Fallenreaper
Ini bekerja untuk saya setelah saya mengatur ng-klik pada div daripada <a>.
Steve
33

Menggunakan atribut khusus (diterapkan dengan arahan) mungkin merupakan cara terbersih. Ini versi saya, berdasarkan saran @Josh dan @ 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);
                });
            });
        }
    }
}]);

Ini memiliki beberapa fitur yang bermanfaat, tetapi saya baru di Angular sehingga mungkin ada ruang untuk perbaikan.

Bennett McElwee
sumber
Bukankah ini akan membuat acara klik pada elemen setiap kali atribut clickLink berubah?
toxaq
@toxaq Jelas tidak sempurna. Saya menduga bahwa ketika clickLinkatribut berubah, arahan akan menambahkan penangan klik baru tetapi meninggalkan yang lama di tempatnya. Hasilnya bisa sedikit kacau. Saya awalnya menulis ini untuk digunakan dalam situasi di mana clickLinkatribut tidak akan pernah berubah, jadi saya tidak pernah terikat pada hal ini. Saya pikir memperbaiki bug ini sebenarnya akan mengarah pada kode yang lebih sederhana - Saya mungkin mencoba melakukannya ketika saya punya waktu (ha!)
Bennett McElwee
Keren. Ya, jika Anda mengambil attrs. $ Amati itu akan berfungsi sebagaimana dimaksud. Saya akan menempelkan versi saya di sini tetapi tidak akan memformat dalam komentar dan praktis identik dengan bagian pengamatan.
toxaq
@toxaq Saya sudah mengedit kode sekarang. Saya pikir saya telah mengadaptasi kode dari beberapa petunjuk lain, itu sebabnya tidak pantas attrs.$observeada di sana. Terima kasih atas saran Anda.
Bennett McElwee
Akan menyarankan ini ketika membaca jawaban yang disarankan. Bersih dan dapat digunakan kembali. +1
Asrama
4

Ingatlah bahwa jika Anda menggunakan ng-klik untuk perutean, Anda tidak akan dapat mengklik kanan elemen tersebut dan memilih 'buka di tab baru' atau ctrl mengklik tautan. Saya mencoba menggunakan ng-href ketika datang ke navigasi. ng-klik lebih baik digunakan pada tombol untuk operasi atau efek visual seperti runtuh. Tapi Tentang saya tidak akan merekomendasikan. Jika Anda mengubah rute, Anda mungkin perlu mengubah banyak aplikasi. Miliki metode untuk mengembalikan tautan. mis: Tentang. Metode ini Anda tempatkan di utilitas

Jens Alenius
sumber
1

Saya menggunakan ng-clickarahan untuk memanggil fungsi, saat meminta route templateUrl, untuk memutuskan mana yang <div>harus berada showatau hidedi dalam halaman route templateUrl atau untuk skenario yang berbeda.

AngularJS 1.6.9

Mari kita lihat contoh, ketika di halaman routing, saya perlu add <div>atau edit <div>, yang saya kontrol menggunakan model pengontrol induk $scope.addProductdan $scope.editProductboolean.

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

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

kedua halaman - RoutingTesting.html(induk), TestingPage.html(halaman perutean) berada di direktori yang sama,

Semoga ini bisa membantu seseorang.

ArifMustafa
sumber
1

Solusi lain tetapi tanpa menggunakan ng-klik yang masih berfungsi bahkan untuk tag lain selain <a>:

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

Dengan cara ini Anda juga dapat melewatkan parameter ke rute Anda: https://stackoverflow.com/a/40045556/838494

(Ini adalah hari pertamaku dengan sudut. Umpan balik yang lembut diterima)

Albert Hendriks
sumber
0

Kamu bisa memakai:

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

Jika Anda ingin beberapa variabel dinamis di dalam href, Anda dapat melakukannya seperti ini:

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

Di mana tautan adalah variabel lingkup sudut.

Sohail xIN3N
sumber
5
Ini tidak menjawab pertanyaan OP, yaitu tentang menggunakan ng-clickuntuk mengubah lokasi.
jjmontes
0

lakukan saja sebagai berikut di html Anda tulis:

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

Dan di controller Anda, tambahkan $ state sebagai berikut: 

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

$scope.going = function(){

$state.go('your route');

}

})
LucasMugi
sumber