AngularJS: मैं एक नियंत्रक फ़ंक्शन से विचार कैसे बदल सकता हूं?

237

मैं विचारों को स्विच करने के लिए AngularJS की एनजी-क्लिक सुविधा का उपयोग करने की कोशिश कर रहा हूं । नीचे दिए गए कोड के साथ मैं ऐसा कैसे करूंगा?

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.html फ़ाइल में सीधे window.location ($ स्थान सेवा का उपयोग करके!) बदल सकते हैं

<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-Compords/blob/master/index.html )

— ganaraj
स्रोत

मुझे एक त्रुटि मिल रही है जो कहती है कि हैश $ स्थान का कार्य नहीं है।

— The_Brink

मैं $ लोकेशन ऑब्जेक्ट का हिस्सा होने के नाते हैश को नहीं देखता, लेकिन एक $ $ हैश वैरिएबल है इसलिए यह है और यदि ऐसा नहीं है तो यह काम नहीं करेगा।

— 23

ठीक है, मुझे पता चला कि यह कैसे करना है। location.path (देखें) $; ( docs.angularjs.org/guide/dev_guide.services.$location )

— The_Brink

@ 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

कुल नाइटपिक, लेकिन FYI, urlवास्तव में पूर्ण वेब पता है, जिसमें प्रोटोकॉल (http: //) और सब कुछ शामिल है। जैसा कि $location.path()आपके वैरिएबल द्वारा निहित है, बेहतर रूप में वर्णित है path।

— ज़ैक लिसोबेई

लेकिन इसके लिए $ rootScope की आवश्यकता होती है। $ डाइजेस्ट (); या $ गुंजाइश। $ लागू (); बिना किसी देरी के इसे स्थानांतरित करने के लिए।

— राज

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>

यहाँ मेरा Ctrl कैसा दिखता है:

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

एप्लिकेशन मेरा मॉड्यूल है:

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

आशा है कि यह उपयोगी है!

— कोड़ी
स्रोत

12

इस प्रश्न के सभी पिछले उत्तरों के लिए उपयोग की जाने वाली विधि का सुझाव है कि यूआरएल को बदलना आवश्यक नहीं है, और मुझे लगता है कि पाठकों को एक वैकल्पिक समाधान के बारे में पता होना चाहिए। मैं एक राज्य मूल्य को एक टेम्पलेट यूआरएल के साथ जोड़ने के लिए यूआई-राउटर और $ स्टेटप्रोविडर का उपयोग करता हूं जो आपके दृष्टिकोण के लिए HTML फ़ाइल को इंगित करता है। फिर यह आपके नियंत्रक में $ राज्य को इंजेक्ट करने और अपने दृश्य को अपडेट करने के लिए $ 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

डिफ़ॉल्ट रूटिंग (# / ViewName) वातावरण का पूर्ण पुन: सुधार किए बिना, मैं कोडी की नोक का मामूली संशोधन करने में सक्षम था और इसे बढ़िया काम मिला।

नियंत्रक

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


    };

आपको पूर्ण पथ की आवश्यकता नहीं है, बस वह दृश्य जिसे आप स्विच कर रहे हैं

— शॉन डोटे
स्रोत