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

237

আমি ভিউগুলিতে স্যুইচ করতে অ্যাংুলারজেএস -এর এনজি-ক্লিক বৈশিষ্ট্যটি ব্যবহার করার চেষ্টা করছি । নীচের কোডটি দিয়ে আমি কীভাবে এটি করতে যাব?

index.html

 <div ng-controller="Cntrl">
        <div ng-click="someFunction()">
            click me
        <div>
    <div>

controller.js

  function Cntrl ($scope) {
        $scope.someFunction = function(){
            //code to change view?
        }
    }

javascript angularjs ngroute

— কিনারা
সূত্র

314

বিভিন্ন দর্শনের মধ্যে স্যুইচ করার জন্য, আপনি সরাসরি উইন্ডোটি পরিবর্তন করতে পারেন index লোকেশন সার্ভিসটি index লোকেশন সার্ভিস ব্যবহার করে!

<div ng-controller="Cntrl">
        <div ng-click="changeView('edit')">
            edit
        </div>
        <div ng-click="changeView('preview')">
            preview
        </div>
</div>

Controller.js

function Cntrl ($scope,$location) {
        $scope.changeView = function(view){
            $location.path(view); // path not hash
        }
    }

এবং অবস্থানের উপর ভিত্তি করে বিভিন্ন পার্টিয়ালগুলিতে স্যুইচ করতে রাউটারটি কনফিগার করুন (এখানে https://github.com/angular/angular-seed/blob/master/app/app.js দেখানো হয়েছে )। এটি এনজি-ভিউ ব্যবহারের পাশাপাশি ইতিহাসের উপকার করতে পারে।

বিকল্পভাবে, আপনি বিভিন্ন পার্টিয়ালের সাথে এনজি-অন্তর্ভুক্ত ব্যবহার করেন এবং তারপরে এখানে বর্ণিত এনজি-সুইচ ব্যবহার করুন ( https://github.com/ganarajpr/Angular-UI- অংশ / ব্লব / মাস্টার/index.html )

— ganaraj
সূত্র

আমি একটি ত্রুটি পেয়েছি যা বলে যে হ্যাশ of লোকেশনের কাজ নয়।

— The_Brink

আমি হ্যাশটিকে $ লোকেশন অবজেক্টের অংশ হিসাবে দেখছি না, তবে একটি h হ্যাশ ভেরিয়েবল রয়েছে তাই এটি এবং যদি এটি কাজ করে না।

— The_Brink

ঠিক আছে, আমি এটি কীভাবে করব তা খুঁজে পেয়েছি। location.path (দেখুন) $; ( ডকস.আঙ্গুলারজেএস.আর.গাইড / দেব_দ্বীপ.সার্ভিসেস.লোকেশন )

— দ্য_ব্রিংক

@The_Brink সম্পাদনার জন্য আপনাকে ধন্যবাদ। কেন তা প্রত্যাখ্যান করা হয়েছিল তা আমি জানি না। আমি যা বলার চেষ্টা করছিলাম তা প্রতিবিম্বিত করতে আমি পরিবর্তন করেছি।

— গণরাজ

2

আসলে সবচেয়ে ভাল কাজটি হল কেবলমাত্র একটি সাধারণ লিঙ্ক। <a href="https://stackoverflow.com/edit">Edit</a> কৌনিকটি নিশ্চিত হয়ে নেবে যে ক্লিকটি কোনও পৃষ্ঠা পুনরায় লোড তৈরি করে না। এই আচরণটি এমনভাবে সংশোধন করা যেতে পারে যাতে এটি পছন্দসই হলে পুনরায় লোডকে ট্রিগার করে।

— অ্যান্টনি মার্টিন

38

প্রদত্ত উত্তরটি একেবারে সঠিক, তবে আমি ভবিষ্যতের যে কোনও দর্শনার্থীর জন্য এটি প্রসারিত করতে চেয়েছিলাম যারা এটি আরও কিছুটা গতিশীলভাবে করতে চান -

দেখুন মধ্যে -

<div ng-repeat="person in persons">
    <div ng-click="changeView(person)">
        Go to edit
    <div>
<div>

নিয়ামক -

$scope.changeView = function(person){
    var earl = '/editperson/' + person.id;
    $location.path(earl);
}

গ্রহণযোগ্য উত্তর হিসাবে একই বেসিক ধারণাটি কিছুটা উন্নত করার জন্য এটিতে কিছু গতিশীল সামগ্রী যুক্ত করে। যদি স্বীকৃত উত্তর এটি যুক্ত করতে চায় তবে আমি আমার উত্তরটি মুছব।

— পিডব্লিউ কাদ
সূত্র

8

মোট নিটপিক, তবে এফওয়াইআই, এটি urlহ'ল প্রোটোকল (HTTP: //) এবং সমস্ত কিছু সহ পুরো ওয়েব ঠিকানা। $location.path()আপনার পরিবর্তনশীল দ্বারা বোঝানো হিসাবে ভাল হিসাবে বর্ণিত হয় path।

— Zach Lysobey

তবে এটির জন্য একটি $ রুটস্কোপ $ ডাইজেস্ট () প্রয়োজন; বা $ সুযোগ। $ প্রয়োগ (); যাতে দেরি না করে এটিকে সরানো যায়।

— রাজ

23

আমি কাজ করে একটি উদাহরণ পেয়েছি।

এখানে আমার দস্তাবেজটি কেমন দেখাচ্ছে:

<html>
<head>
    <link rel="stylesheet" href="css/main.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-resource.min.js"></script>
    <script src="js/app.js"></script>
    <script src="controllers/ctrls.js"></script>
</head>
<body ng-app="app">
    <div id="contnr">
        <ng-view></ng-view>
    </div>
</body>
</html>

আমার আংশিক দেখতে এখানে:

<div id="welcome" ng-controller="Index">
    <b>Welcome! Please Login!</b>
    <form ng-submit="auth()">
        <input class="input login username" type="text" placeholder="username" /><br>
        <input class="input login password" type="password" placeholder="password" /><br>
        <input class="input login submit" type="submit" placeholder="login!" />
    </form>
</div>

আমার সিটিআরএল দেখতে দেখতে এখানে:

app.controller('Index', function($scope, $routeParams, $location){
    $scope.auth = function(){
        $location.url('/map');
    };
});

অ্যাপ্লিকেশনটি আমার মডিউল:

var app = angular.module('app', ['ngResource']).config(function($routeProvider)...

আশা করি এটি সহায়ক!

— কোডি
সূত্র

12

এই প্রশ্নের পূর্ববর্তী সমস্ত উত্তরের জন্য ব্যবহৃত পদ্ধতিটি ইউআরএল পরিবর্তন করার পরামর্শ দেয় যা প্রয়োজনীয় নয় এবং আমি মনে করি যে বিকল্প সমাধান সম্পর্কে পাঠকদের সচেতন হওয়া উচিত। আমি টেমপ্লেট ইউআরএল এর সাথে রাষ্ট্রীয় মান সংযুক্ত করতে ইউআই-রাউটার এবং $ statePovider ব্যবহার করি যা আপনার দেখার জন্য এইচটিএমএল ফাইলকে নির্দেশ করে। তারপরে আপনার দৃষ্টিভঙ্গিটি আপডেট করার জন্য $ রাষ্ট্রটিকে আপনার নিয়ামকতে ইনজেকশনের জন্য এবং $ state.go ('রাষ্ট্র-মান') বলার বিষয়টি কেবল বিষয়।

কৌণিক-রুট এবং কৌণিক-ইউআই-রাউটারের মধ্যে পার্থক্য কী?

— গ্যাভিন পামার
সূত্র

5

এর জন্য দুটি উপায় রয়েছে:

আপনি যদি ইউআই-রাউটার ব্যবহার করছেন বা $stateProvider, এটি এটি করুন:

$state.go('stateName'); //remember to add $state service in the controller

আপনি যদি কৌনিক-রাউটার ব্যবহার করছেন বা $routeProvider, এটি হিসাবে করুন:

$location.path('routeName'); //similarily include $location service in your controller

— সুখমিন্দার পারমার
সূত্র

আমাকে যে বিষয়টি ছড়িয়ে দিয়েছে তা হ'ল রাষ্ট্রের নামের পরিবর্তে রুটের নামটি ব্যবহার করছিল ... অর্থাৎ এটি "/ প্রধান" এর পরিবর্তে "প্রধান" হওয়া উচিত

— বেন শ্মিড্ট

3

ডিফল্ট রাউটিং (# / ভিউনাম) পরিবেশের পুরো পুনঃনির্মাণ না করেই আমি কোডির টিপকে সামান্য পরিবর্তন করতে সক্ষম হয়েছি এবং এটি দুর্দান্তভাবে কাজ করতে পেরেছি।

নিয়ামক

.controller('GeneralCtrl', ['$route', '$routeParams', '$location',
        function($route, $routeParams, $location) {
            ...
            this.goToView = function(viewName){
                $location.url('/' + viewName);
            }
        }]
    );

দৃশ্য

...
<li ng-click="general.goToView('Home')">HOME</li>
...

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

আগের পোস্টের জন্য ধন্যবাদ!

— beauXjames
সূত্র

2

Firstly you have to create state in app.js as below

.state('login', {
      url: '/',
      templateUrl: 'views/login.html',
      controller: 'LoginCtrl'
    })

and use below code in controller

 $location.path('login');

আশা করি এটা তোমাকে সাহায্য করবে

— বৈশালী তেখালে
সূত্র

2

এই ছোট্ট কাজটি আমাকে ভালভাবে পরিবেশন করেছে:

    //goto view:
    //useage -  $scope.gotoView("your/path/here", boolean_open_in_new_window)
    $scope.gotoView = function (st_view, is_newWindow)
    {

        console.log('going to view: ' + '#/' + st_view, $window.location);
        if (is_newWindow)
        {
            $window.open($window.location.origin + $window.location.pathname + '' + '#/' + st_view, '_blank');
        }
        else
        {
            $window.location.hash = '#/' + st_view;
        }


    };

আপনার পুরো পথের দরকার নেই, আপনি যে মতামতটি স্যুইচ করছেন

— শন ডোতে
সূত্র