ฉันจะทำให้ปุ่มย้อนกลับทำงานกับเครื่องสถานะเราเตอร์ AngularJS ui-router ได้อย่างไร

Question 1

ผมได้ดำเนินการ angularjs แอพลิเคชันหน้าเดียวโดยใช้UI เตอร์

เดิมทีฉันระบุแต่ละรัฐโดยใช้ URL ที่แตกต่างกัน แต่สิ่งนี้สร้างขึ้นสำหรับ URL ที่บรรจุ GUID ที่ไม่เป็นมิตร

ตอนนี้ฉันได้กำหนดไซต์ของฉันให้เป็น state-machine ที่ง่ายกว่ามาก รัฐไม่ได้ระบุโดย URL แต่จะเปลี่ยนเป็นเพียงตามที่กำหนดดังนี้:

กำหนดสถานะที่ซ้อนกัน

angular
.module 'app', ['ui.router']
.config ($stateProvider) ->
    $stateProvider
    .state 'main', 
        templateUrl: 'main.html'
        controller: 'mainCtrl'
        params: ['locationId']

    .state 'folder', 
        templateUrl: 'folder.html'
        parent: 'main'
        controller: 'folderCtrl'
        resolve:
            folder:(apiService) -> apiService.get '#base/folder/#locationId'

การเปลี่ยนเป็นสถานะที่กำหนด

#The ui-sref attrib transitions to the 'folder' state

a(ui-sref="folder({locationId:'{{folder.Id}}'})")
    | {{ folder.Name }}

ระบบนี้ทำงานได้ดีมากและฉันชอบไวยากรณ์ที่สะอาด อย่างไรก็ตามเนื่องจากฉันไม่ได้ใช้ urls ปุ่มย้อนกลับจึงไม่ทำงาน

ฉันจะรักษาสถานะเครื่อง ui-router ที่เรียบร้อย แต่เปิดใช้งานฟังก์ชันปุ่มย้อนกลับได้อย่างไร

Question 2

บันทึก

คำตอบที่แนะนำให้ใช้รูปแบบต่างๆของ$window.history.back()ทุกคนพลาดส่วนสำคัญของคำถาม: วิธีกู้คืนสถานะของแอปพลิเคชันไปยังตำแหน่งสถานะที่ถูกต้องเมื่อประวัติกระโดด (ย้อนกลับ / ไปข้างหน้า / รีเฟรช) ด้วยสิ่งนั้นในใจ; โปรดอ่านต่อ

ใช่เป็นไปได้ที่จะให้เบราว์เซอร์ย้อนกลับ / ไปข้างหน้า (ประวัติ) และรีเฟรชในขณะที่เรียกใช้เครื่องui-routerสถานะบริสุทธิ์แต่ต้องใช้เวลาสักหน่อย

คุณต้องมีส่วนประกอบหลายอย่าง:

URL ที่ไม่ซ้ำ เบราว์เซอร์จะเปิดใช้งานปุ่มย้อนกลับ / ไปข้างหน้าเมื่อคุณเปลี่ยน URL เท่านั้นดังนั้นคุณต้องสร้าง URL ที่ไม่ซ้ำกันต่อรัฐที่เยี่ยมชม URL เหล่านี้ไม่จำเป็นต้องมีข้อมูลสถานะใด ๆ
บริการเซสชัน URL ที่สร้างขึ้นแต่ละรายการมีความสัมพันธ์กับสถานะหนึ่ง ๆ ดังนั้นคุณต้องมีวิธีในการจัดเก็บคู่สถานะ URL ของคุณเพื่อให้คุณสามารถดึงข้อมูลสถานะได้หลังจากที่แอปเชิงมุมของคุณถูกรีสตาร์ทโดยการคลิกย้อนกลับ / ไปข้างหน้าหรือรีเฟรช
ประวัติความเป็นมาของรัฐ พจนานุกรมง่ายๆของสถานะ ui-router ที่คีย์ด้วย URL ที่ไม่ซ้ำกัน หากคุณสามารถพึ่งพา HTML5 ได้คุณก็สามารถใช้HTML5 History APIได้ แต่ถ้าเช่นฉันคุณไม่สามารถใช้งานได้ด้วยตัวเองในโค้ดไม่กี่บรรทัด (ดูด้านล่าง)
บริการระบุตำแหน่ง สุดท้ายคุณต้องสามารถจัดการทั้งการเปลี่ยนแปลงสถานะของเราเตอร์ ui-router ซึ่งถูกเรียกใช้ภายในโดยรหัสของคุณและการเปลี่ยนแปลง url ของเบราว์เซอร์ตามปกติมักเกิดจากการที่ผู้ใช้คลิกปุ่มเบราว์เซอร์หรือพิมพ์สิ่งต่างๆลงในแถบเบราว์เซอร์ ทั้งหมดนี้อาจเป็นเรื่องยุ่งยากเล็กน้อยเพราะมันง่ายที่จะสับสนเกี่ยวกับสิ่งที่กระตุ้นให้เกิดอะไรขึ้น

นี่คือการดำเนินการตามข้อกำหนดเหล่านี้ของฉัน ฉันได้รวมทุกอย่างไว้เป็นสามบริการ:

บริการเซสชัน

class SessionService

    setStorage:(key, value) ->
        json =  if value is undefined then null else JSON.stringify value
        sessionStorage.setItem key, json

    getStorage:(key)->
        JSON.parse sessionStorage.getItem key

    clear: ->
        @setStorage(key, null) for key of sessionStorage

    stateHistory:(value=null) ->
        @accessor 'stateHistory', value

    # other properties goes here

    accessor:(name, value)->
        return @getStorage name unless value?
        @setStorage name, value

angular
.module 'app.Services'
.service 'sessionService', SessionService

นี่คือกระดาษห่อหุ้มสำหรับsessionStorageวัตถุจาวาสคริปต์ ฉันได้ตัดมันลงเพื่อความชัดเจนที่นี่ สำหรับคำอธิบายทั้งหมดโปรดดู: ฉันจะจัดการกับการรีเฟรชหน้าด้วยแอปพลิเคชัน AngularJS Single Page ได้อย่างไร

บริการประวัติศาสตร์ของรัฐ

class StateHistoryService
    @$inject:['sessionService']
    constructor:(@sessionService) ->

    set:(key, state)->
        history = @sessionService.stateHistory() ? {}
        history[key] = state
        @sessionService.stateHistory history

    get:(key)->
        @sessionService.stateHistory()?[key]

angular
.module 'app.Services'
.service 'stateHistoryService', StateHistoryService

StateHistoryServiceดูหลังจากการจัดเก็บและการดึงของรัฐประวัติศาสตร์คีย์โดยการสร้าง URL ที่ไม่ซ้ำกัน มันเป็นเพียงเครื่องห่อหุ้มที่สะดวกสำหรับวัตถุสไตล์พจนานุกรม

บริการตำแหน่งของรัฐ

class StateLocationService
    preventCall:[]
    @$inject:['$location','$state', 'stateHistoryService']
    constructor:(@location, @state, @stateHistoryService) ->

    locationChange: ->
        return if @preventCall.pop('locationChange')?
        entry = @stateHistoryService.get @location.url()
        return unless entry?
        @preventCall.push 'stateChange'
        @state.go entry.name, entry.params, {location:false}

    stateChange: ->
        return if @preventCall.pop('stateChange')?
        entry = {name: @state.current.name, params: @state.params}
        #generate your site specific, unique url here
        url = "/#{@state.params.subscriptionUrl}/#{Math.guid().substr(0,8)}"
        @stateHistoryService.set url, entry
        @preventCall.push 'locationChange'
        @location.url url

angular
.module 'app.Services'
.service 'stateLocationService', StateLocationService

StateLocationServiceจับสองเหตุการณ์:

locationChange . สิ่งนี้เรียกว่าเมื่อตำแหน่งของเบราว์เซอร์มีการเปลี่ยนแปลงโดยทั่วไปเมื่อกดปุ่มย้อนกลับ / ไปข้างหน้า / รีเฟรชหรือเมื่อแอปเริ่มทำงานครั้งแรกหรือเมื่อผู้ใช้พิมพ์ URL หากรัฐสำหรับ location.url ปัจจุบันที่มีอยู่ในStateHistoryServiceนั้นจะใช้ในการเรียกคืนสถานะผ่าน $state.goUI-เราเตอร์
stateChange สิ่งนี้เรียกว่าเมื่อคุณย้ายสถานะภายใน ชื่อและพารามิเตอร์ของสถานะปัจจุบันจะถูกเก็บไว้ในStateHistoryServiceคีย์โดย url ที่สร้างขึ้น URL ที่สร้างขึ้นนี้อาจเป็นอะไรก็ได้ที่คุณต้องการโดยอาจระบุหรือไม่ระบุสถานะด้วยวิธีที่มนุษย์อ่านได้ ในกรณีของฉันฉันใช้พารามิเตอร์สถานะบวกกับลำดับของตัวเลขที่สร้างขึ้นแบบสุ่มซึ่งได้มาจาก guid (ดูส่วนท้ายสำหรับข้อมูลโค้ดตัวสร้างคำแนะนำ) URL @location.url urlที่สร้างขึ้นจะปรากฏในแถบเบราว์เซอร์และขับเคลื่อนเพิ่มไปยังกองประวัติศาสตร์ภายในเบราว์เซอร์ที่ใช้ เพิ่ม url ไปยังกองประวัติของเบราว์เซอร์ที่เปิดใช้งานปุ่มไปข้างหน้า / ย้อนกลับ

ปัญหาใหญ่ของเทคนิคนี้คือการเรียก@location.url urlใช้stateChangeเมธอดจะทำให้เกิด$locationChangeSuccessเหตุการณ์และเรียกใช้locationChangeเมธอด การเรียก@state.goจากอย่างเท่าเทียมกันlocationChangeจะทริกเกอร์$stateChangeSuccessเหตุการณ์และstateChangeวิธีการ สิ่งนี้ทำให้เกิดความสับสนและทำให้ประวัติเบราว์เซอร์ยุ่งเหยิงไม่สิ้นสุด

วิธีแก้ปัญหานั้นง่ายมาก คุณสามารถเห็นpreventCallอาร์เรย์ที่ใช้เป็นสแต็ก ( popและpush) ทุกครั้งที่มีการเรียกวิธีการใดวิธีการหนึ่งจะป้องกันไม่ให้วิธีการอื่นเรียกว่าครั้งเดียวเท่านั้น เทคนิคนี้ไม่รบกวนการทริกเกอร์เหตุการณ์ $ ที่ถูกต้องและทำให้ทุกอย่างตรง

ตอนนี้สิ่งที่เราต้องทำคือเรียกใช้HistoryServiceวิธีการในช่วงเวลาที่เหมาะสมในวงจรชีวิตการเปลี่ยนสถานะ สิ่งนี้ทำได้ในวิธี AngularJS Apps .runดังนี้:

แอปเชิงมุมเรียกใช้

angular
.module 'app', ['ui.router']
.run ($rootScope, stateLocationService) ->

    $rootScope.$on '$stateChangeSuccess', (event, toState, toParams) ->
        stateLocationService.stateChange()

    $rootScope.$on '$locationChangeSuccess', ->
        stateLocationService.locationChange()

สร้าง Guid

Math.guid = ->
    s4 = -> Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1)
    "#{s4()}#{s4()}-#{s4()}-#{s4()}-#{s4()}-#{s4()}#{s4()}#{s4()}"

เมื่อใช้งานทั้งหมดนี้ปุ่มเดินหน้า / ถอยหลังและปุ่มรีเฟรชก็ทำงานได้ตามที่คาดไว้

Question 3

app.run(['$window', '$rootScope', 
function ($window ,  $rootScope) {
  $rootScope.goBack = function(){
    $window.history.back();
  }
}]);

<a href="#" ng-click="goBack()">Back</a>

Question 4

หลังจากทดสอบข้อเสนอต่างๆฉันพบว่าวิธีที่ง่ายที่สุดมักจะดีที่สุด

หากคุณใช้ ui-router เชิงมุมและคุณต้องการปุ่มเพื่อย้อนกลับที่ดีที่สุดคือ:

<button onclick="history.back()">Back</button>

หรือ

<a onclick="history.back()>Back</a>

// คำเตือนอย่าตั้งค่า href มิฉะนั้นเส้นทางจะเสีย

คำอธิบาย: สมมติว่าเป็นแอปพลิเคชันการจัดการมาตรฐาน ค้นหาวัตถุ -> ดูวัตถุ -> แก้ไขวัตถุ

การใช้วิธีแก้ปัญหาเชิงมุม จากสถานะนี้:

ค้นหา -> ดู -> แก้ไข

ถึง :

ค้นหา -> ดู

นั่นคือสิ่งที่เราต้องการยกเว้นถ้าคุณคลิกปุ่มย้อนกลับของเบราว์เซอร์คุณจะอยู่ที่นั่นอีกครั้ง:

ค้นหา -> ดู -> แก้ไข

และนั่นไม่ใช่เหตุผล

อย่างไรก็ตามการใช้วิธีง่ายๆ

<a onclick="history.back()"> Back </a>

จาก:

ค้นหา -> ดู -> แก้ไข

หลังจากคลิกที่ปุ่ม:

ค้นหา -> ดู

หลังจากคลิกที่ปุ่มย้อนกลับของเบราว์เซอร์:

ค้นหา

เคารพความสม่ำเสมอ :-)

Question 5

หากคุณกำลังมองหาปุ่ม "ย้อนกลับ" ที่ง่ายที่สุดคุณสามารถตั้งค่าคำสั่งดังนี้:

    .directive('back', function factory($window) {
      return {
        restrict   : 'E',
        replace    : true,
        transclude : true,
        templateUrl: 'wherever your template is located',
        link: function (scope, element, attrs) {
          scope.navBack = function() {
            $window.history.back();
          };
        }
      };
    });

โปรดทราบว่านี่เป็นปุ่ม "ย้อนกลับ" ที่ค่อนข้างเข้าใจยากเนื่องจากใช้ประวัติของเบราว์เซอร์ หากคุณรวมไว้ในหน้า Landing Page ระบบจะส่งผู้ใช้กลับไปยัง URL ใด ๆ ที่มาจากก่อนที่จะเข้าสู่หน้า Landing Page ของคุณ

Question 6

วิธีแก้ปัญหาปุ่มย้อนกลับ / ไปข้างหน้าของเบราว์เซอร์
ฉันพบปัญหาเดียวกันและฉันแก้ไขโดยใช้popstate eventจากวัตถุ $ window และui-router's $state object. เหตุการณ์ป๊อปสเตทจะถูกส่งไปที่หน้าต่างทุกครั้งที่รายการประวัติที่ใช้งานมีการเปลี่ยนแปลง และเหตุการณ์ที่เกิดขึ้นไม่ได้เรียกบนเบราว์เซอร์คลิกปุ่มแม้ว่าแถบที่อยู่ระบุตำแหน่งใหม่ ดังนั้นสมมติว่าคุณได้ไปจากรัฐที่จะไปอีกครั้งเมื่อคุณกดบนเบราว์เซอร์ที่คุณควรจะกลับไปที่เส้นทาง เส้นทางที่มีการปรับปรุง แต่ดูไม่ได้และยังคงแสดงสิ่งที่คุณมีใน ลองสิ่งนี้:
$stateChangeSuccess$locationChangeSuccess
mainfoldermainbackfoldermain

angular
.module 'app', ['ui.router']
.run($state, $window) {

     $window.onpopstate = function(event) {

        var stateName = $state.current.name,
            pathname = $window.location.pathname.split('/')[1],
            routeParams = {};  // i.e.- $state.params

        console.log($state.current.name, pathname); // 'main', 'folder'

        if ($state.current.name.indexOf(pathname) === -1) {
            // Optionally set option.notify to false if you don't want 
            // to retrigger another $stateChangeStart event
            $state.go(
              $state.current.name, 
              routeParams,
              {reload:true, notify: false}
            );
        }
    };
}

ปุ่มย้อนกลับ / ไปข้างหน้าควรทำงานได้อย่างราบรื่นหลังจากนั้น

หมายเหตุ: ตรวจสอบความเข้ากันได้ของเบราว์เซอร์สำหรับ window.onpopstate () ให้แน่ใจ

Question 7

สามารถแก้ไขได้โดยใช้คำสั่งง่ายๆ "go-back-history" อันนี้กำลังปิดหน้าต่างในกรณีที่ไม่มีประวัติก่อนหน้านี้

คำสั่งการใช้งาน

<a data-go-back-history>Previous State</a>

การประกาศคำสั่งเชิงมุม

.directive('goBackHistory', ['$window', function ($window) {
    return {
        restrict: 'A',
        link: function (scope, elm, attrs) {
            elm.on('click', function ($event) {
                $event.stopPropagation();
                if ($window.history.length) {
                    $window.history.back();
                } else {
                    $window.close();  
                }
            });
        }
    };
}])

หมายเหตุ: การทำงานโดยใช้ ui-router หรือไม่

Question 8

ปุ่มย้อนกลับไม่ทำงานสำหรับฉันเช่นกัน แต่ฉันพบว่าปัญหาคือฉันมีhtmlเนื้อหาอยู่ในหน้าหลักของฉันในui-viewองค์ประกอบ

กล่าวคือ

<div ui-view>
     <h1> Hey Kids! </h1>
     <!-- More content -->
</div>

ดังนั้นฉันจึงย้ายเนื้อหาไปยัง.htmlไฟล์ใหม่และทำเครื่องหมายเป็นเทมเพลตใน.jsไฟล์พร้อมกับเส้นทาง

กล่าวคือ

   .state("parent.mystuff", {
        url: "/mystuff",
        controller: 'myStuffCtrl',
        templateUrl: "myStuff.html"
    })

Question 9

history.back()และเปลี่ยนไปใช้สถานะก่อนหน้ามักจะไม่ให้ผลที่คุณต้องการ ตัวอย่างเช่นหากคุณมีแบบฟอร์มที่มีแท็บและแต่ละแท็บมีสถานะของตัวเองสิ่งนี้จะเปลี่ยนแท็บก่อนหน้านี้ที่เลือกไว้ไม่ใช่กลับจากฟอร์ม ในกรณีที่มีสถานะซ้อนกันคุณมักจะต้องคิดถึงแม่มดของรัฐแม่ที่คุณต้องการย้อนกลับ

คำสั่งนี้ช่วยแก้ปัญหาได้

angular.module('app', ['ui-router-back'])

<span ui-back='defaultState'> Go back </span>

จะกลับสู่สถานะที่ใช้งานอยู่ก่อนที่ปุ่มจะปรากฏขึ้น ทางเลือกdefaultStateคือชื่อสถานะที่ใช้เมื่อไม่มีสถานะก่อนหน้าในหน่วยความจำ นอกจากนี้ยังเรียกคืนตำแหน่งการเลื่อน

รหัส

class UiBackData {
    fromStateName: string;
    fromParams: any;
    fromStateScroll: number;
}

interface IRootScope1 extends ng.IScope {
    uiBackData: UiBackData;
}

class UiBackDirective implements ng.IDirective {
    uiBackDataSave: UiBackData;

    constructor(private $state: angular.ui.IStateService,
        private $rootScope: IRootScope1,
        private $timeout: ng.ITimeoutService) {
    }

    link: ng.IDirectiveLinkFn = (scope, element, attrs) => {
        this.uiBackDataSave = angular.copy(this.$rootScope.uiBackData);

        function parseStateRef(ref, current) {
            var preparsed = ref.match(/^\s*({[^}]*})\s*$/), parsed;
            if (preparsed) ref = current + '(' + preparsed[1] + ')';
            parsed = ref.replace(/\n/g, " ").match(/^([^(]+?)\s*(\((.*)\))?$/);
            if (!parsed || parsed.length !== 4)
                throw new Error("Invalid state ref '" + ref + "'");
            let paramExpr = parsed[3] || null;
            let copy = angular.copy(scope.$eval(paramExpr));
            return { state: parsed[1], paramExpr: copy };
        }

        element.on('click', (e) => {
            e.preventDefault();

            if (this.uiBackDataSave.fromStateName)
                this.$state.go(this.uiBackDataSave.fromStateName, this.uiBackDataSave.fromParams)
                    .then(state => {
                        // Override ui-router autoscroll 
                        this.$timeout(() => {
                            $(window).scrollTop(this.uiBackDataSave.fromStateScroll);
                        }, 500, false);
                    });
            else {
                var r = parseStateRef((<any>attrs).uiBack, this.$state.current);
                this.$state.go(r.state, r.paramExpr);
            }
        });
    };

    public static factory(): ng.IDirectiveFactory {
        const directive = ($state, $rootScope, $timeout) =>
            new UiBackDirective($state, $rootScope, $timeout);
        directive.$inject = ['$state', '$rootScope', '$timeout'];
        return directive;
    }
}

angular.module('ui-router-back')
    .directive('uiBack', UiBackDirective.factory())
    .run(['$rootScope',
        ($rootScope: IRootScope1) => {

            $rootScope.$on('$stateChangeSuccess',
                (event, toState, toParams, fromState, fromParams) => {
                    if ($rootScope.uiBackData == null)
                        $rootScope.uiBackData = new UiBackData();
                    $rootScope.uiBackData.fromStateName = fromState.name;
                    $rootScope.uiBackData.fromStateScroll = $(window).scrollTop();
                    $rootScope.uiBackData.fromParams = fromParams;
                });
        }]);