কোনও রুটে কল করতে এনজি-ক্লিক কীভাবে / কখন ব্যবহার করবেন?

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

এবং আপনার এইচটিএমএলে, যখন কোনও বোতামটি ক্লিক করা হয় তখন আপনি প্রায় পৃষ্ঠাটিতে নেভিগেট করতে চান। একটি উপায় হবে

<a href="#/about">

... তবে মনে হচ্ছে এনজি-ক্লিকও এখানে কার্যকর হবে।

1. এটা কি অনুমান সঠিক? অ্যাঙ্কারের পরিবর্তে এনজি-ক্লিক ব্যবহার করা হবে?
2. যদি তাই হয়, কিভাবে কাজ করবে? অর্থাৎ,

<div ng-click="/about">

Comments

একটি নিয়ামক ফাংশন থেকে আমি AngularJS এ কীভাবে মতামত স্যুইচ করব

— ব্লেজমোনজার

: নামঃ ui-sref এই উত্তরটি দেখুন stackoverflow.com/a/21105057/2539811

— Vincil বিশপ

Answer 1

রুটগুলি $locationপরিষেবাটি নিরীক্ষণ করে এবং ইউআরএল পরিবর্তনের জন্য প্রতিক্রিয়া জানায় (সাধারণত হ্যাশের মাধ্যমে)। কোনও রুট "সক্রিয়" করতে, আপনি কেবল 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

এইটি আমার পক্ষে কাজ করে নি, তবে। লোকেশন.হ্যাশ (হ্যাশ) প্রতিস্থাপন করে; $ লোকেশন.পথ (হ্যাশ) সহ; এটা কাজ করে। এটি একটি উত্তর উত্তর @ সিয়ান দ্বারা প্রস্তাবিত, যার কোনও কারণে খুব কম ভোট রয়েছে।

— পের কুইস্টড আরনসন

@ পারকিউটেডআরনসন pathএবং hashদুটি ভিন্ন উদ্দেশ্যে পরিবেশন করেছেন তবে পরিস্থিতিগুলির উপর নির্ভর করে একই প্রভাব থাকতে পারে। বেশিরভাগ ক্ষেত্রে, কঠোর রাউটিংয়ের জন্য (বিশেষত html5modeসক্ষমযুক্ত), pathক্যানোনিকাল পছন্দ হবে। আমি এটি প্রতিফলিত উত্তর আপডেট।

— জোশ ডেভিড মিলার

@ ডেভিডউডস এটি ব্যবহার করা উচিত, তবে কেবল যদি বেস পথটি মেলে /। আপনি যদি অ্যাপ্লিকেশনটি পরিবেশন করে থাকেন /app/index.htmlতবে নিখুঁত ইউআরএল হওয়ায় এটি কাজ করবে না /app/next.html। স্পষ্টতই, সার্ভারটি চাপলে আপনার index.htmlফাইলটি ফিরতে অবশ্যই সেট করা উচিত /next.html। আপনি যদি আমাকে একবার দেখতে চান তবে একটি প্লঙ্কার / ফিডল নির্দ্বিধায় পোস্ট করুন।

— জোশ ডেভিড মিলার

এটি করা খুব জেনেরিক এবং দরকারী জিনিস। এটিকে কেন্দ্রীভূত করার কোনও উপায় আছে, বা আমাদের কি সত্যই goপ্রতিটি নিয়ামকের একটি পদ্ধতি যুক্ত করতে হবে? (বা কোনও goপদ্ধতির সাহায্যে একটি রুট কন্ট্রোলার তৈরি করতে চান ?)

— বেনেট ম্যাকএলউই

@ বেনেটএমসিএলওয়ে আমার মনে হয় এখন পর্যন্ত অ্যাঙ্কর ট্যাগ ব্যবহার করা সবচেয়ে ভাল উপায়; বোতাম ট্যাগ এই ক্ষেত্রে কোনও মূল্য দেয় না এবং এটিই সমস্যাটি তৈরি করছে। তাই বলা হয়, আপনি সহজেই আপনার জন্য এই কাজ করতে, যেমন একটি নির্দেশ তৈরি করা যায়নি: <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

শীতল ধন্যবাদ! এই উত্তরটি আমার পক্ষে আরও ভাল কাজ করেছে, কারণ হ্যাশ পদ্ধতিটি ইউআরএলগুলিতে মানগুলি সংযুক্ত করে (এনকোডড) এবং পথের পদ্ধতিটি আমাকে সম্পূর্ণ ইউআরএল প্রতিস্থাপন করতে দেয়, যা আমার প্রয়োজন ছিল। ধন্যবাদ!

— jfplataroti

এই পৃষ্ঠায় এটিই একমাত্র প্রস্তাবিত সমাধান যা আসলে কাজ করেছিল। জানেন না কেন অন্য উত্তরে এর চেয়ে অনেক বেশি ভোট রয়েছে ..?

— পের কুইস্টেড আরনসন

আমি এটি চেষ্টা করছিলাম, তবে এটি কাজ করছে না। কন্ট্রোলারের সাথে সংযুক্ত হওয়ার আগে আমাকে কি মডিউলের পাশাপাশি স্থান যুক্ত করতে হবে?

— ফলানরেপার

এটি একবারের জন্য আমার জন্য কাজ হয়েছিল যখন আমি <a> এর চেয়ে কোনও ডিভিতে এনজি-ক্লিক সেট করি।

— স্টিভ 23

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বৈশিষ্ট্যটি কখনই পরিবর্তিত হয় না, তাই আমি কখনই এই আলগা শেষটি বেঁধে রাখি না। আমি মনে করি এই বাগটি সংশোধন করা আসলেই সহজ কোডের দিকে নিয়ে যায় - আমার যখন সময় হবে (

— হ্যাক

কুল। হ্যাঁ, আপনি যদি অ্যাটর্সগুলি বের করেন $ এটি লক্ষ্য হিসাবে কাজ করবে intended পর্যবেক্ষণ করুন। আমি এখানে আমার সংস্করণটি পেস্ট করব তবে এটি মন্তব্যে ফর্ম্যাট হবে না এবং পর্যবেক্ষণ অংশটি কার্যত অভিন্ন বার।

— toxaq

@ টক্সাক আমি এখনই কোডটি সম্পাদনা করেছি। আমি মনে করি আমি কোডটি অন্য কোনও দিকনির্দেশক থেকে রূপান্তর করেছি, সে কারণেই অনুপযুক্ত attrs.$observeছিল। আপনার পরামর্শের জন্য ধন্যবাদ।

— বেনেট ম্যাকএলউই

প্রস্তাবিত উত্তরের মাধ্যমে পড়ার সময় এটি পরামর্শ দেওয়ার কথা ছিল। পরিষ্কার এবং পুনরায় ব্যবহারযোগ্য। +1 টি

— অলস

Answer 4

মনে রাখবেন যে আপনি রাউটিংয়ের জন্য এনজি-ক্লিক ব্যবহার করলে আপনি উপাদানটির ডান-ক্লিক করতে এবং 'নতুন ট্যাবে খুলুন' বা লিঙ্কটি ক্লিক করে সিটিআরএল করতে পারবেন না। নেভিগেশনের সময় আমি এনজি-হেরেফ ব্যবহার করার চেষ্টা করি। ক্রিয়া বা ভিজ্যুয়াল ইফেক্টের জন্য বোতামগুলির জন্য এনজি-ক্লিক আরও ভাল। তবে সম্পর্কে আমি সুপারিশ করব না। আপনি যদি রুটটি পরিবর্তন করেন তবে আপনাকে অ্যাপ্লিকেশনটিতে প্রচুর স্থান পরিবর্তন করতে হবে। লিঙ্কটি ফেরত দেওয়ার একটি পদ্ধতি রয়েছে। প্রাক্তন: সম্পর্কে। এই পদ্ধতিটি আপনি কোনও ইউটিলিটিতে রাখুন

Answer 5

আমি ব্যবহৃত 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(রাউটিং পৃষ্ঠা) একই ডিরেক্টরিতে রয়েছে,

আশা করি এটি কারও সাহায্য করবে।

Answer 6

এনজি-ক্লিক ব্যবহার না করেই অন্য একটি সমাধান যা এখনও এর চেয়ে অন্যান্য ট্যাগগুলির জন্য কার্যকর হয় <a>:

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

এইভাবে আপনি নিজের রুটে প্যারামিটারগুলিও পাস করতে পারেন: https://stackoverflow.com/a/40045556/838494

(কৌনিক সহ এটি আমার প্রথম দিন G নম্র প্রতিক্রিয়া স্বাগত)

Answer 7

তুমি ব্যবহার করতে পার:

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

আপনি যদি href এর ভিতরে কিছু গতিশীল পরিবর্তনশীল চান তবে আপনি এইভাবে করতে পারেন:

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

যেখানে লিঙ্কটি কৌণিক স্কোপ পরিবর্তনশীল।

Comments

এটি ওপি প্রশ্নের উত্তর দেয় না, যা ng-clickঅবস্থান পরিবর্তন করতে ব্যবহার করার বিষয়ে ।

— jjmontes

Answer 8

আপনার এইচটিএমএল লিখনের নীচে কেবল এটি করুন:

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

এবং আপনার নিয়ামক হিসাবে, নিম্নলিখিত হিসাবে $ রাষ্ট্র যুক্ত করুন:

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

$scope.going = function(){

$state.go('your route');

}

})