簡體   English   中英

Angular:UI路由器如何通過狀態將數據對象或某些參數傳遞給其他控制器

[英]Angular: ui-router how to pass data object or some parameter to other controller through state

我已經讀過有關ui-router的解決方案和數據的信息,但仍然無法獲得解決問題的方法?

查看1個HTML:

<a ui-sref="configuration.settings.list"><span>Settings</span></a>
<a ui-sref="configuration.settings.personal({user: userId})"><span >Personal</span></a>

userId是在控制器中為當前視圖定義的變量。

路線定義:

angular.module("app").config(["$stateProvider", "$urlRouterProvider", "$locationProvider", 
function($stateProvider, $urlRouterProvider, $locationProvider) {


    $stateProvider

    .state('configuration.settings.lis', {
        url: '/',
        templateUrl: 'html/settings',
        controller: 'settingsController',
    }),
    .state('configuration.settings.personal', {
        url: '/:userId',
        templateUrl: 'html/settings',
        controller: 'personalController',
    }),

我可以通過stateParams訪問personalController userId

問題:我想將對象或某些參數從View 1傳遞到personalController而不使用`stateParams。 可能嗎?

像這樣:

<a ui-sref="configuration.settings.personal({myDamnCooLObject})"><span >Personal</span></a>


.state('configuration.settings.personal', {
        url: '/', <-- NO attributes here!!!
        templateUrl: 'html/settings',
        controller: 'personalController',
        data: {{myDamnCooLObject}} <-- THIS object or parameter shuld be accesseble from 'personalController'
    })

僅保證為使用$stateParams的目標路由保留$stateParams ui-router實際上使該對象保持干凈,因此您不能只是將隨機的東西塞進其中。

我很幸運使用服務作為管理器對象來在視圖之間保留項目。 例如,我有一個應用程序,其中包含用戶個人資料頁面和照片庫作為單獨的視圖。 我希望在畫廊中獲得很多用戶的核心數據,因為有一個標題,包括他們的名字,鏈接,側面有一個小生物框等。

我進行連接的方式是,兩個視圖在其URL中都有一個用戶ID作為參數。 我有一個管理器,該管理器維護用戶數據的緩存,而一個getter返回一個將其返回的承諾。 在這兩種狀態下,我都有一個resolve塊,該塊使用用戶ID並向管理器詢問整個數據對象。 經理第一次進行Web服務調用以獲取數據,然后立即解決第二次調用(誰先到達那里都無所謂)。 它運行良好,重量輕。

在您的示例中,您根本不需要URL中的參數,但是模型可以以相同的方式工作。 服務是全局單例,因此您可以將它們用作各種事物傳遞和通過狀態轉換之類的持久化的垃圾場。 顯然,這是一個滑坡,因為一旦開始執行此操作,也會啟用許多不良的編程習慣-但要小心並擁有良好的模式,這是一種非常有用的技術。

請注意,很多人實際上出於相同的目的使用$rootScope它具有基本相同的效果。 但我個人認為服務會更好,因為這樣您就可以對需要傳遞的數據進行非常顯式的定義包裝,它的可測試性更高,並且記錄起來也更加容易。 使用$rootScope您只是將原始變量轉儲到一大堆中,而這變成了一堆意大利面條,以便以后拆分,尤其是如果您不小心重用了變量名。 這會導致各種難以發現的錯誤。 借助服務,您甚至可以使用getter / setter,甚至可以將狀態轉換( $state.go() )調用連接到setter中。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM