मार्ग को कॉल करने के लिए एनजी-क्लिक का उपयोग कैसे / कब करें?

Question

मान लीजिए कि आप मार्गों का उपयोग कर रहे हैं:

// 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">

... लेकिन ऐसा लगता है कि एनजी-क्लिक यहां भी उपयोगी होगा।

1. क्या यह धारणा सही है? एंकर के बजाय एनजी-क्लिक का उपयोग किया जाएगा?
2. यदि हां, तो वह कैसे काम करेगा? अर्थात:

<div ng-click="/about">

Comments

एक डुप्लिकेट नियंत्रक फ़ंक्शन से मैं AngularJS में विचारों

— ब्लेज़ेमॉन्गर

ui-sref इस उत्तर को देखें: stackoverflow.com/a/21105057/2539811

— Vincil Bishop

Answer 1

रूट $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>

Comments

इसने मेरे लिए काम नहीं किया, लेकिन $ स्थान बदलकर। हश (हैश); $ स्थान के साथ ।पथ (हैश); यह काम करता हैं। यह एक अन्य उत्तर में @sean द्वारा सुझाया गया है, जिसके पास किसी कारण से बहुत कम वोट हैं।

— प्रति क्वेस्ट एरनसन

@PerQuestedAronsson pathऔर hashदो अलग-अलग उद्देश्यों के लिए सेवा करते हैं लेकिन परिस्थिति के आधार पर समान प्रभाव हो सकते हैं। अधिकांश मामलों के लिए, सख्त रूटिंग के लिए (विशेष रूप से html5modeसक्षम के साथ ), pathविहित विकल्प होगा। मैंने इसे प्रतिबिंबित करने के लिए उत्तर को अपडेट किया।

— जोश डेविड मिलर

@DavidWoods यह काम करना चाहिए, लेकिन केवल अगर बेस पथ से मेल खाता है /। यदि आप ऐप से सेवा दे रहे हैं /app/index.html, तो यह काम नहीं करेगा क्योंकि निरपेक्ष URL है /app/next.html। जाहिर है, index.htmlहिट होने पर सर्वर को आपकी फ़ाइल वापस करने के लिए सेट किया जाना चाहिए /next.html। बेझिझक एक प्लंकर / फिडल पोस्ट करें यदि आप चाहते हैं कि मैं एक बार देखूं।

— जोश डेविड मिलर

यह एक बहुत ही सामान्य और उपयोगी चीज है। क्या इसे केंद्रीकृत करने का एक तरीका है, या क्या हमें वास्तव में goहर नियंत्रक के लिए एक विधि जोड़ना है ? (या एक goविधि के साथ एक रूट नियंत्रक बनाते हैं ?)

— बेनेट McElwee 25'13

@BennettMcElwee मुझे लगता है कि अब तक का सबसे अच्छा तरीका सिर्फ एंकर टैग का उपयोग करना है; बटन टैग इस मामले में कोई मूल्य प्रदान नहीं करता है और जो समस्या पैदा कर रहा है। उस ने कहा, आप आसानी से ऐसा करने के लिए एक निर्देश बना सकते हैं, जैसे <button click-go="/home">Click</button>:। लिंक का कार्य केवल यह होगा:element.on("click", function () { $location.path(attrs.clickGo); });

— जोश डेविड मिलर

Answer 2

यहाँ एक महान टिप है जिसका उल्लेख किसी ने नहीं किया है। नियंत्रक में जो फ़ंक्शन है, आपको स्थान प्रदाता को शामिल करना होगा:

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>

Comments

धन्यवाद! इस उत्तर ने मेरे लिए बेहतर काम किया, क्योंकि हैश विधि url (एन्कोडेड) पर मूल्यों को जोड़ देती है और पथ विधि मुझे पूर्ण url को बदलने देती है, यही मुझे चाहिए था। धन्यवाद!

— jfplataroti

यह इस पृष्ठ पर एकमात्र सुझाया गया समाधान है जो वास्तव में काम करता है। पता नहीं क्यों एक और जवाब में इस एक से अधिक वोट हैं ..?

— प्रति क्वेस्ट एरॉनसन

मैं यह कोशिश कर रहा था, लेकिन यह काम नहीं कर रहा है। क्या मुझे नियंत्रक के साथ संलग्न करने से पहले मॉड्यूल में स्थान जोड़ना होगा?

— फॉलेंप्रिपर

एक बार मैंने एक <a> के बजाय एक div पर एनजी-क्लिक पर सेट करने पर मेरे लिए यह काम किया।

— स्टीव

Answer 3

एक कस्टम विशेषता (एक निर्देश के साथ कार्यान्वित) का उपयोग करना शायद सबसे साफ तरीका है। यहाँ मेरा संस्करण, @ जोश और @ शॉन के सुझावों पर आधारित है।

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

इसकी कुछ उपयोगी विशेषताएं हैं, लेकिन मैं कोणीय के लिए नया हूं इसलिए शायद सुधार की गुंजाइश है।

Comments

क्या हर बार क्लिकलिंक विशेषता में परिवर्तन होने पर यह तत्व पर एक क्लिक ईवेंट नहीं बनायेगा?

— टोक्‍यैक

@toxaq यह निश्चित रूप से सही नहीं है। मुझे संदेह है कि जब clickLinkविशेषता बदल जाती है, तो निर्देश नया क्लिक हैंडलर जोड़ देगा लेकिन पुराने को छोड़ देगा। परिणाम थोड़ा अराजक हो सकता है। मैंने मूल रूप से इसे ऐसी स्थिति में उपयोग करने के लिए लिखा था, जहां clickLinkविशेषता कभी नहीं बदलेगी, इसलिए मैंने इस ढीले अंत को कभी नहीं बांधा। मुझे लगता है कि इस बग को ठीक करने से वास्तव में सरल कोड हो जाएगा - मैं इसे तब करने की कोशिश कर सकता हूं जब मेरे पास समय होगा (हा!)

— बेनेट McElwee

ठंडा। हाँ, यदि आप एट्रस निकालते हैं। $ निरीक्षण करें कि यह इरादा के अनुसार काम करेगा। मैं अपना संस्करण यहाँ पेस्ट करूँगा लेकिन यह टिप्पणियों में प्रारूपित नहीं होगा और व्यावहारिक रूप से समान रूप से अवलोकन भाग को बार करेगा।

— टोक्सीक

@toxaq मैंने अभी कोड संपादित किया है। मुझे लगता है कि मैंने किसी अन्य निर्देश से कोड को अनुकूलित किया था, इसीलिए यह अनुचित attrs.$observeथा। आपके सुझाव के लिए धन्यवाद।

— बेनेट मैकलेवे

सुझाए गए उत्तरों के माध्यम से पढ़ने पर यह सुझाव देने वाला था। साफ और पुन: प्रयोज्य। +1

— डॉरमहाउस

Answer 4

याद रखें कि यदि आप रूटिंग के लिए एनजी-क्लिक का उपयोग करते हैं तो आप तत्व पर राइट-क्लिक नहीं कर पाएंगे और 'ओपन इन न्यू टैब' चुनें या लिंक पर क्लिक करें। मैं नेविगेशन में आने पर ng-href का उपयोग करने का प्रयास करता हूं। एनजी क्लिक ऑपरेशन के लिए बटन पर उपयोग करना बेहतर है या पतन जैसे दृश्य प्रभाव। लेकिन मेरे बारे में मैं सिफारिश नहीं करूंगा। यदि आप मार्ग को बदलते हैं तो आपको आवेदन में बहुत कुछ बदलना पड़ सकता है। लिंक को वापस करने का एक तरीका है। पूर्व: के बारे में। यह विधि आप एक उपयोगिता में रखते हैं

Answer 5

मैंने ng-clickरूट टेम्पलेट टेम्पलेट का अनुरोध करते हुए एक फ़ंक्शन को कॉल करने के लिए निर्देश का उपयोग किया था , यह तय करने के लिए कि रूट टेम्पलेटयूआरएल पेज या अलग-अलग परिदृश्यों के लिए या अंदर <div>होना है।showhide

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(राउटिंग पेज) एक ही निर्देशिका में हैं,

उम्मीद है कि यह किसी की मदद करेगा।

Answer 6

एक अन्य समाधान लेकिन एनजी-क्लिक का उपयोग किए बिना जो अभी भी अन्य टैग के लिए काम करता है <a>:

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

इस तरह से आप अपने रूट पर पैरामीटर भी पास कर सकते हैं: https://stackoverflow.com/a/40045556/838494

(यह कोणीय के साथ मेरा पहला दिन है। कोमल प्रतिक्रिया का स्वागत है)

Answer 7

आप उपयोग कर सकते हैं:

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

यदि आप href के अंदर कुछ डायनामिक वैरिएबल चाहते हैं तो आप इस तरह से कर सकते हैं:

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

जहां लिंक कोणीय गुंजाइश चर है।

Comments

यह ओपी प्रश्न का उत्तर नहीं देता है, जो ng-clickस्थान बदलने के लिए उपयोग करने के बारे में है ।

— 17

Answer 8

बस इसे अपने HTML में निम्नानुसार लिखें:

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

और अपने नियंत्रक में, निम्नानुसार $ स्थिति जोड़ें:

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

$scope.going = function(){

$state.go('your route');

}

})