AngularJS利用Controller完成URL跳轉(zhuǎn)
具體寫法舉例:
1.js定義一個controller
function MyCtrl($scope, $location) { $scope.jumpToUrl = function(path) { //TODO:add code here }; }
2.html里面應(yīng)用controller
<div ng-controller=‘MyCtrl'> <button ng-click="jumpToUrl('/signin')">signin</button> </div>
3.controller里面TODO的位置填入
$location.path(path);
然后運(yùn)行起來就可以看效果了。
假設(shè)當(dāng)前頁面的url是:http://127.0.0.1:8080/#/home
$location.path(path);執(zhí)行后就會跳到http://127.0.0.1:8080/#/signin
如果你發(fā)現(xiàn)頁面不能正常跳轉(zhuǎn),可以在$location.path(path);
后面再加上一句
var curUrl = $location.absUrl(); //用來顯示url全路徑
調(diào)試跟蹤頁面時查看curUrl的值到底變成多少,大概就能猜出問題出在哪了。
好了,以上就是在AngularJS利用Controller完成URL跳轉(zhuǎn)的全部內(nèi)容,希望本文對大家學(xué)習(xí)AngularJS有所幫助。
- AngularJS路由實現(xiàn)頁面跳轉(zhuǎn)實例
- angularjs項目的頁面跳轉(zhuǎn)如何實現(xiàn)(5種方法)
- Angular 頁面跳轉(zhuǎn)時傳參問題
- Angular中$state.go頁面跳轉(zhuǎn)并傳遞參數(shù)的方法
- AngularJS之頁面跳轉(zhuǎn)Route實例代碼
- angular4 如何在全局設(shè)置路由跳轉(zhuǎn)動畫的方法
- AngularJS實現(xiàn)單一頁面內(nèi)設(shè)置跳轉(zhuǎn)路由的方法
- AngularJS頁面帶參跳轉(zhuǎn)及參數(shù)解析操作示例
- AngularJS實現(xiàn)頁面跳轉(zhuǎn)后自動彈出對話框?qū)嵗a
- AngularJS實現(xiàn)的錨點樓層跳轉(zhuǎn)功能示例
相關(guān)文章
indexedDB bootstrap angularjs之 MVC DOMO (應(yīng)用示例)
這篇文章主要介紹了indexedDB bootstrap angularjs之 MVC DOMO (應(yīng)用示例)的相關(guān)資料,需要的朋友可以參考下2016-06-06Angular 的 Change Detection機(jī)制實現(xiàn)詳解
這篇文章主要為大家介紹了Angular 的 Change Detection機(jī)制實現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10AngularJS自定義服務(wù)與fliter的混合使用
這篇文章主要介紹了AngularJS自定義服務(wù)與fliter的混合使用的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-11-11Angular.js 4.x中表單Template-Driven Forms詳解
Angular 4.x 中有兩種表單,一種是Template-Driven Forms - 模板驅(qū)動式表單,另外一種是Reactive Forms - 響應(yīng)式表單 ,下面這篇文章主要給大家介紹了Angular.js 4.x中表單Template-Driven Forms的相關(guān)資料,需要的朋友可以參考學(xué)習(xí),下面來一起看看吧。2017-04-04Angular.js如何從PHP讀取后臺數(shù)據(jù)
這篇文章主要為大家簡單介紹了Angular.js如何從PHP讀取后臺數(shù)據(jù),本文將Angular和PHP相結(jié)合,從后臺讀取數(shù)據(jù),感興趣的小伙伴們可以參考一下2016-03-03AngularJS之頁面跳轉(zhuǎn)Route實例代碼
本篇文章主要介紹了AngularJS之頁面跳轉(zhuǎn)Route ,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-03-03