इतिहास को कैसे लागू करें ।बैक () कोणीय में

Question

मेरे पास निर्देश है जो बैक बटन के साथ साइट हेडर है और मैं पिछले पृष्ठ पर वापस जाने के लिए क्लिक करना चाहता हूं। मैं इसे कोणीय तरीके से कैसे करूं?

मैंने कोशिश की है:

<header class="title">
<a class="back" ng-class="icons"><img src="../media/icons/right_circular.png" ng-click="history.back()" /></a>
<h1>{{title}}</h1>
<a href="/home" class="home" ng-class="icons"><img src="../media/icons/53-house.png" /></a>   
</header>

और यह निर्देशन js है:

myApp.directive('siteHeader', function () {
    return {
        restrict: 'E',
        templateUrl: 'partials/siteHeader.html',
        scope: {
            title: '@title',
            icons: '@icons'
        }
    };
});

लेकिन कुछ नहीं होता है। मैंने $ लोकेशन के बारे में angular.js API में देखा लेकिन बैक बटन या के बारे में कुछ भी नहीं पाया history.back()।

Comments

आपने उल्लेख किया कि यह आपके लिए काम करता है। क्या यह आपको आपके ऐप के भीतर अलग-अलग पृष्ठों पर ले जाता है या बस ब्राउज़र को वापस करता है? ऐसा लगता है कि यह मेरे लिए ब्राउज़र वापस करता है।

— चोकूओस

यदि आपने HTML5 मोड का उपयोग करने के लिए AngularJS सेट किया है, तो ब्राउज़र के इतिहास में पहले से ही किसी भी पृष्ठ पर जाकर कैश्ड संस्करण का उपयोग किया जाएगा और इसे पुनः लोड नहीं किया जाएगा । मैं जिस प्रोजेक्ट पर काम कर रहा हूं, वह पुराने और नए कोड के मिश्रण का उपयोग कर रहा है, और पिछले पृष्ठ में परिवर्तन के बाद डेटा को AngularJS के साथ सहेजा गया है। यह AngularJS का उपयोग करने के लिए पहले पृष्ठ को अपग्रेड करने का विकल्प नहीं है, इसलिए मुझे पहले वाले पर वापस अनुप्रेषित करने के लिए एक तीसरा, गैर-AngularJS पृष्ठ लोड करना पड़ा। एक अच्छा समाधान नहीं है, लेकिन यह काम करता है।

— सीजे डेनिस

Answer 1

आपको अपने निर्देश में लिंक फ़ंक्शन का उपयोग करने की आवश्यकता है:

link: function(scope, element, attrs) {
     element.on('click', function() {
         $window.history.back();
     });
 }

JsFiddle देखें ।

Comments

लेकिन मेरे हेडर में 2 बटन घर के लिए एक हैं और एक के लिए अगर मैं आपके कोड को समझता हूं लिंक फ़ंक्शन में तत्व वह तत्व है जिसे उस मामले में क्लिक किया गया था। हिस्ट्री भी होम बटन के लिए लागू होगी? (जो अच्छा नहीं है? )

— बाबा-देव २

मैंने उदाहरण को थोड़ा बदल दिया है। अब दो बटन हैं (पीछे और आगे)। यह अब jQuery का उपयोग करता है, जिसका अर्थ है गुंजाइश। क्लिक पर $ apply () की आवश्यकता है।

— asgoth

यह कोड अप्रतिष्ठित है, आपको वास्तव में 'विंडो' के बजाय '$ विंडो' ऑब्जेक्ट का उपयोग करना चाहिए।

— आर्बिटर

IE8 के साथ यह काम करता है? मुझे विश्वास नहीं है कि इसका इतिहास है

— नील

@ नील, कोणीय गर्व से IE8 का समर्थन नहीं करता है। तो, नहीं।

— रैप

Answer 2

कोणीय मार्ग ब्राउज़र के स्थान को देखते हैं, इसलिए बस window.history.back()कुछ क्लिक करने पर उपयोग करना काम करेगा।

HTML:

<div class="nav-header" ng-click="doTheBack()">Reverse!</div>

जे एस:

$scope.doTheBack = function() {
  window.history.back();
};

मैं आमतौर पर अपने ऐप कंट्रोलर पर '$ बैक' नामक एक वैश्विक फ़ंक्शन बनाता हूं, जिसे मैं आमतौर पर बॉडी टैग पर रखता हूं।

angular.module('myApp').controller('AppCtrl', ['$scope', function($scope) {
  $scope.$back = function() { 
    window.history.back();
  };
}]);

फिर मेरे ऐप में कहीं भी मैं बस कर सकता हूं <a ng-click="$back()">Back</a>

(यदि आप चाहते हैं कि यह अधिक परीक्षण योग्य हो, तो अपने नियंत्रक और उपयोग में $ विंडो सेवा को इंजेक्ट करें $window.history.back())।

Comments

मैं "ग्लोबल फंक्शन" में कुछ भी डालने की सलाह देता हूँ। कई बेहतरीन चीजें हैं जो वैश्विक स्थिति में हो सकती हैं । इस मामले में यह ज्यादातर इसकी अस्थिरता है। तीसरे पक्ष से कोड (या किसी अन्य डेवलपर, यदि आप एक बड़ी टीम पर हैं), एक निर्देश, या एक सेवा आसानी से $ गुंजाइश हो सकती है। यह बच्चों के लिए $ वापस है। जिसे डिबग करना मुश्किल हो सकता है। प्रत्येक घटक में किसी सेवा को इंजेक्ट करने के लिए निश्चित रूप से बेहतर अभ्यास है, और जहां आवश्यक हो, कार्यक्षमता को उजागर करें। उदाहरण केवल "ऐप के लिए वैश्विक" है, लेकिन जोखिम है

— बेन लेश

स्रोत: मेरे पास ऐसी चीजें हैं जो मैं "वैश्विक" ऐप में फंस गया हूं $ गुंजाइश मुझे गिनने के लिए बहुत बार काटता है, और मैंने सेवाओं के पक्ष में उस तकनीक का उपयोग करना बंद कर दिया है। जिसे अभी भी ट्रम्प किया जा सकता है, लेकिन यह आसान तरीका है।

— बेन लेश

Answer 3

नियंत्रकों को बेमानी $ खिड़की से मुक्त रखने के लिए आदर्श निर्देश का उपयोग करें

app.directive('back', ['$window', function($window) {
        return {
            restrict: 'A',
            link: function (scope, elem, attrs) {
                elem.bind('click', function () {
                    $window.history.back();
                });
            }
        };
    }]);

इस तरह का उपयोग करें:

<button back>Back</button>

Comments

खुशी है कि आपने $ विंडो निर्भरता दिखाई - यह महत्वपूर्ण है।

— क्रिस स्मिथ

Answer 4

एक और अच्छा और पुन: प्रयोज्य समाधान इस तरह एक निर्देश बनाना है :

app.directive( 'backButton', function() {
    return {
        restrict: 'A',
        link: function( scope, element, attrs ) {
            element.on( 'click', function () {
                history.back();
                scope.$apply();
            } );
        }
    };
} );

तो बस इस तरह का उपयोग करें:

<a href back-button>back</a>

Comments

एक बार काम करने के लिए लगता है कि आप बंद होने वाले कर्ल को फिर से चालू करते हैं और एक दूसरे से मेल खाने के लिए निर्देश और तत्व एटर का नाम बदल देते हैं।

— remarsh

Answer 5

मामले में यह उपयोगी है ... मैं "10 $ डाइजेस्ट () पुनरावृत्तियों तक पहुँच गया था। गर्भपात!" $ window.history.back () का उपयोग करते समय त्रुटि; IE9 के साथ (पाठ्यक्रम के अन्य ब्राउज़रों में ठीक काम करता है)।

मुझे इसका उपयोग करके काम करने के लिए मिला:

setTimeout(function() {
  $window.history.back();
},100);

Comments

अन्य उत्तर सादे का उपयोग करते हैं window। आप $windowकोणीय सेवा का उपयोग कर रहे हैं । शायद यह मूल कारण है?

— सुपरजोस

मुझे IE9 के तहत एक ही त्रुटि मिली और इससे समस्या हल हो गई। Github.com/angular/angular.js/issues/1417 देखें वह $ विंडो का उपयोग करने के बारे में सही है, अन्य सभी जवाब इस बिंदु पर "गलत" हैं, डॉक्स

— tanguy_k

100ms पर कोई विचार क्यों? यह काफी देरी है, क्या यह कम के साथ काम करता है?

— केविन

@ क्विन 100ms केवल एक अवधि थी जो मुझे लगा कि यह उचित है और ध्यान देने योग्य नहीं है। वास्तव में एक छोटी सी देरी काम कर सकती है।

— रोब बेंग्रेव

मुझे अपने ऐप में कोणीय डिफ़ॉल्ट नेविगेशन का उपयोग करते समय नवीनतम क्रोम में समान मुद्दे मिलते हैं, और देरी भी मदद नहीं करेगी। केवल कोणीय के नेविगेशन प्रबंधन को अक्षम करने से मदद मिली।

— डोमी

Answer 6

या आप बस उपयोग कर सकते हैं जावास्क्रिप्ट कोड:

onClick="javascript:history.go(-1);"

पसंद:

<a class="back" ng-class="icons">
   <img src="../media/icons/right_circular.png" onClick="javascript:history.go(-1);" />
</a>

Comments

यह इतने सारे स्तरों पर गलत दिखता है, सीएफ। लगभग 10 साल पहले का यह ब्लॉग पोस्ट

— रोक्को

Answer 7

एक सिंटैक्स त्रुटि थी। यह कोशिश करो और यह काम करना चाहिए:

directives.directive('backButton', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function () {
                history.back();
                scope.$apply();
            });
        }
    }
});

Answer 8

कोणीय 4:

/* typescript */
import { Location } from '@angular/common';
// ...

@Component({
  // ...
})
export class MyComponent {

  constructor(private location: Location) { } 

  goBack() {
    this.location.back(); // go back to previous location
  }
}

Answer 9

मेरे लिए, मेरी समस्या मुझे वापस नेविगेट करने और फिर दूसरे राज्य में स्थानांतरित करने की आवश्यकता थी। इसलिए उपयोग करने से $window.history.back()काम नहीं चला क्योंकि किसी कारण से संक्रमण इतिहास से पहले हुआ था ।बैक () तो यह हुआ कि मुझे अपने संक्रमण को टाइमआउट फ़ंक्शन में लपेटना पड़ा।

$window.history.back();
setTimeout(function() {
  $state.transitionTo("tab.jobs"); }, 100);

इससे मेरा मुद्दा ठीक हो गया।

Answer 10

AngularJS2 में मुझे एक नया तरीका मिला, हो सकता है कि बस एक ही बात हो लेकिन इस नए संस्करण में:

import {Router, RouteConfig, ROUTER_DIRECTIVES, Location} from 'angular2/router'; 

(...)

constructor(private _router: Router, private _location: Location) {}

onSubmit() {
    (...)
    self._location.back();
}

मेरे कार्य के बाद, मैं देख सकता हूं कि मेरा एप्लिकेशन कोणीय 2 / राउटर से पिछले पेज usgin लोकेशन पर जा रहा है।

https://angular.io/docs/ts/latest/api/common/index/Location-class.html

Comments

यह काम करता है, आपको इसे @ कोणीय / सामान्य से आयात करना होगा, न कि @ कोणीय / राउटर से।

— प्लेक्सस