Bir rotayı aramak için ng-click nasıl / ne zaman kullanılır?

243

Rota kullandığınızı varsayalım:

// 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'nizde, bir düğme tıklandığında yaklaşık sayfasına gitmek istersiniz. Bunun bir yolu

<a href="#/about">

... ama ng-click burada da faydalı olabilir.

  1. Bu varsayım doğru mu? Çapa yerine bu ng-tıklama kullanılsın mı?
  2. Öyleyse, bu nasıl çalışır? IE:

<div ng-click="/about">

angularjs  routes  angularjs-routing  angularjs-ng-click  angularjs-ng-route 
— Robert Christian
kaynak
— Blazemonger
ui-sref Bu yanıta bakın: stackoverflow.com/a/21105057/2539811
— Vincil Bishop

Yanıtlar:

430

Rotalar $locationhizmeti izler ve URL'deki değişikliklere yanıt verir (genellikle karma yoluyla). Bir rotayı "etkinleştirmek" için URL'yi değiştirmeniz yeterlidir. Bunu yapmanın en kolay yolu bağlantı etiketleri kullanmaktır.

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

Daha karmaşık bir şeye gerek yok. Bununla birlikte, bunu koddan yapmanız gerekiyorsa, doğru yol $locationhizmeti kullanmaktır :

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

Örneğin, bir düğme tetikleyebilir:

<button ng-click="go('/home')"></button>
— Josh David Miller
kaynak
6
Bu benim için işe yaramadı, ama $ location.hash (hash) yerine; $ location.path (karma) ile; işe yarıyor. Bu, herhangi bir nedenle çok daha az oy alan başka bir cevapta @sean tarafından öneriliyor.
— Per Quested Aronsson
2
@PerQuestedAronsson pathve hashiki farklı amaca hizmet eder, ancak duruma bağlı olarak aynı etkiye sahip olabilir. Çoğu durumda, sıkı yönlendirme için (özellikle html5modeetkinken), pathkanonik seçim olacaktır. Cevabı bunu yansıtacak şekilde güncelledim.
— Josh David Miller
2
@DavidWoods Çalışmalıdır, ancak yalnızca temel yol eşleşirse /. Uygulamayı şuradan sunuyorsanız /app/index.html, mutlak URL olduğu için bu çalışmaz /app/next.html. Açıkçası, sunucu index.htmlisabet edildiğinde dosyanızı geri döndürecek şekilde ayarlanmalıdır /next.html. Bir göz atmamı istiyorsanız, bir Plunker / Fiddle yayınlamaktan çekinmeyin.
— Josh David Miller
2
Bu çok genel ve kullanışlı bir şey. Merkezileştirmenin bir yolu var mı, yoksa goher denetleyiciye gerçekten bir yöntem eklememiz gerekiyor mu? (Veya bir goyöntemle bir kök denetleyici oluşturmalı mısınız?)
— Bennett McElwee 25:03
3
@BennettMcElwee Bence en iyi yaklaşım sadece bağlantı etiketleri kullanmaktır; düğme etiketi bu durumda hiçbir değer sağlamaz ve sorunu yaratan şeydir. Yani, kolayca sizin için mesela bunu yapmak için bir yönerge oluşturabilir, şunları söyledi: <button click-go="/home">Click</button>. Bağlantı işlevi sadece şu olurdu:element.on("click", function () { $location.path(attrs.clickGo); });
— Josh David Miller
83

İşte kimsenin bahsetmediği harika bir ipucu. İşlevin dahil olduğu denetleyicide, konum sağlayıcısını eklemeniz gerekir:

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
kaynak
2
havalı teşekkürler! Bu yanıt benim için daha iyi çalıştı, çünkü hash yöntemi url (kodlanmış) değerlerini ekler ve yol yöntemi tam url'i değiştirmeme izin verir, bu da ihtiyacım olan şeydi. Teşekkürler!
— jfplataroti
8
Bu sayfada gerçekten işe yarayan tek çözüm budur. Neden başka bir cevabın bundan daha fazla oyu olduğunu bilmiyorum ..?
— Per Quested Aronsson
Bunu deniyordum, ama çalışmıyor. Denetleyiciye bağlamadan önce modüle de yer eklemem gerekir mi?
— Fallenreaper
<a> yerine bir div'a ng-click ayarladıktan sonra bu benim için çalıştı.
— Steve
33

Özel bir öznitelik kullanmak (bir yönergeyle uygulanır) belki de en temiz yoldur. İşte @Josh ve @ sean'ın önerilerine dayanan versiyonum.

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);
                });
            });
        }
    }
}]);

Bazı yararlı özellikleri var, ancak Angular için yeniyim, bu yüzden muhtemelen iyileştirme için yer var.

— Bennett McElwee
kaynak
Bu, clickLink özelliği her değiştiğinde öğe üzerinde bir tıklama etkinliği oluşturmaz mı?
— toxaq
@toxaq Kesinlikle mükemmel değil. clickLinkÖzellik değiştiğinde, direktifin yeni tıklama işleyicisini ekleyeceğini ancak eskisini yerinde bırakacağından şüpheleniyorum . Sonuç biraz kaotik olabilir. Aslında bunu, clickLinközelliğin asla değişmeyeceği bir durumda kullanmak için yazdım , bu yüzden bu gevşek ucu asla bağlayamadım. Bu hatayı düzeltmek aslında daha basit bir kod yol açacağını düşünüyorum
— Zamanım
Güzel. Evet, attrileri çıkarırsanız. $ Amaçlanan şekilde çalışacağını gözlemleyin. Sürümümü buraya yapıştırırdım, ancak yorumlarda biçimlendirilmeyecek ve gözlemlenen bölümün hemen hemen aynısı.
— toxaq
@toxaq Şimdi kodu düzenledim. Sanırım kodu başka bir yönergeden uyarlamıştım, bu yüzden uygunsuz attrs.$observeoradaydı. Önerileriniz için teşekkürler.
— Bennett McElwee
Önerilen cevapları okurken bunu önermek üzereydi. Temiz ve tekrar kullanılabilir. +1
— Dormouse
4

Yönlendirme için ng-click kullanırsanız, öğeyi sağ tıklayıp "yeni sekmede aç" veya bağlantıyı tıklayarak ctrl'yi seçemeyeceğinizi unutmayın. Navigasyon söz konusu olduğunda ng-href kullanmaya çalışıyorum. ng-click, işlemler veya daraltma gibi görsel efektler için düğmelerde kullanmak daha iyidir. Ama Hakkında tavsiye etmem. Rotayı değiştirirseniz, uygulamaya yerleştirilen bir çok yerde değiştirmeniz gerekebilir. Bağlantıyı döndüren bir yöntem var. ör .: Hakkında. Bir yardımcı programa yerleştirdiğiniz bu yöntem

— Jens Alenius
kaynak
1

ng-clickYönerge, route templateUrl isteğinde bulunurken, hangisinin <div>olması gerektiğini showveya hideroute templateUrl sayfası içinde veya farklı senaryolar için karar vermek amacıyla bir işlevi çağırmak için kullandım .

AngularJS 1.6.9

Yönlendirme sayfasında bir örnek görelim , üst denetleyici modelleri ve boolean kullanarak kontrol ettiğim eklenti <div>veya düzenlemeye ihtiyacım var .<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>
Snippet'i genişlet

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>
Snippet'i genişlet

her iki sayfa - RoutingTesting.html(ebeveyn),TestingPage.html (yönlendirme sayfası) aynı dizinde,

Umarım bu birine yardımcı olur.

— ArifMustafa
kaynak
0

Kullanabilirsiniz:

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

Href içinde bazı dinamik değişkenler istiyorsanız şu şekilde yapabilirsiniz:

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

Nerede bağlantı Açısal kapsamı değişkendir.

— Sohail xIN3N
kaynak
5
Bu, ng-clickkonumu değiştirmek için kullanmakla ilgili OP sorusuna cevap vermez .
— jjmontes
0

html yazınızda aşağıdaki gibi yapın:

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

Denetleyicinize $ state değerini aşağıdaki gibi ekleyin: 

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

$scope.going = function(){

$state.go('your route');

}

})
— LucasMugi
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.