Angular UI: $state.go()

สิ่งที่ควรรู้

การใช้งาน $state.go()

จากตัวอย่างที่ผ่านมาเราใช้ ui-sref ในการย้าย state คราวนี้เราจะมาลองใช้ $state.go() ดูกันบ้าง โดยการใช้งานมีลักษณะดังนี้

• to - ชื่อ state ที่ต้องการจะไป โดยมีตัวอย่างการใช้ดังนี้
  • $state.go('contact.detail') - จะไปยัง state contact.detail
  • $state.go('^') - จะไปยัง parent state
  • $state.go('^.sibling') - จะไปยัง state sibling ที่มี parent เดียวกัน
  • $state.go('.child.grandchild') - จะไปยัง state ลูกของลูก
• toParams - พารามิเตอร์ส่งไปยัง state นั้น
• options - ใช้สำหรับกำหนดค่าเพิ่มเติม โดยมีตัวเลือกดังนี้
  • location (Boolean / "replace") - [default: true] กรณีที่เป็น true จะทำการ update url ใน location bar ของ browser กรณีที่เป็น "replace" จะทำการ update url และ replace history record สุดท้าย
  • inherit (Boolean) - [default: false] กรณีที่เป็น true จะทำการ inherit url parameter ของ url ส่งไปด้วย
  • relative (stateObject) - [default: $state.$current] เมื่อทำการเปลี่ยน state ด้วย relative path

    เช่น '^' จะกำหนดให้ state นั้นเป็น relative from

  • notify (Boolean) - [default: true] กรณีที่เป็น true จะทำการ broadcast event [$stateChangeStart] และ [$stateChangeSuccess]
  • reload (Boolean) - [default: false] กรณที่เป็น true จะบังคับให้ทำการเปลี่ยน state หากอยู่ใน state เดิมก็ทำการ reload หน้านั้นใหม่

$state.go(to [, toParams] [, options]);

ตัวอย่างการใช้งาน $state.go()

กำหนด state ไว้ 3 state โดยให้มี controller ประกาศฟังก์ชั่นสำหรับเรียกใช้งาน $state.go() และกำหนดปุ่ม ให้เมื่อคลิกจะข้ามไป state อื่นๆ

angular.module('application', ['ui.router'])
    .config(function ($stateProvider, $urlRouterProvider) {
		$urlRouterProvider.otherwise('/one');
        $stateProvider
            .state('one', {
                url: '/one',
                template: '<p>this is state one</p><p ui-view></p>' +
				'<button class="btn btn-default" ng-click="linkTo(stateName)">State Two</button>' +
				'<button class="btn btn-default" ng-click="linkTo(stateName2)">State Three</button>',
				controller: function ($state, $scope) {
					$scope.stateName = "one.two";
					$scope.stateName2 = "three";
					$scope.linkTo = function (state) {
						console.log(state);
						$state.go(state);
					};
				}
            })
			.state('one.two', {
                url: '/two',
                template: '<p>this is state one-two</p>'
            })
			.state('three', {
                url: '/three',
                template: '<p>this is state three</p>'
            });
    });

ในไฟล์ html ทำการกำหนดดังนี้

<div class="container">
	<ul class="nav nav-pills">
		<li><a ui-sref="one">State One</a></li>
		<li><a ui-sref="one.two">State Two</a></li>
		<li><a ui-sref="three">State Three</a></li>
	</ul>
	<div>
		<p>Event show on log ,please open the console</p>
		<div ui-view></div>
	</div>
</div>

สามารถดูตัวอย่างผลลัพธ์ได้ที่นี่ Demo

กรณีที่มีตัวแปรส่งแบบ Object เราจำเป็นต้องกำหนดดังนี้

$stateProvider
    .state('A', {
        controller: function ($scope, $state) {
            $scope.arrayOject = [{name: 'bob',age: 20}, {name: 'john', age: 24}, {name: 'Jane', age: 30}];

            $scope.checkOut = function () {
                var params = {"arrayOject":$scope.arrayOject};
                $state.go("checkout", params);
            };
        }
    })
    .state('B', {
        params: {'arrayOject':''},
        controller: function ($scope, $stateParams) {
            $stateParams.arrayOject;
        }
    });