通過UI路由器傳遞對象到控制器

Question

我使用角度/導軌創建用戶個人資料頁面。我已經建立了使用界面的路由器，像這樣一個StateProvider，

$stateProvider 
    .state('friendprofile', { 
    url: '/{name}', 
    views: { 
     "friendProfile": { 
     templateUrl: '../assets/angular-app/templates/_friendProfile.html', 
     controller: 'friendProfileCtrl', 
     } 
    }, 
    }) 

這是從模板中的點擊動作，

%a.profile{"ui-sref" => "friendprofile(user)"} 
    name: {{ user.name }} 

請注意，我路過這裏user。

所以當鏈接.profile被點擊時，我去的網址http://localhost:3000/#/Jan%20Jansen。所以這很好。

在我friendProfileCtrl我有一個調用的服務的功能，

friendProfileService.loadProfile().then(function(response) { 
    $scope.user_profile = response.data; 
    console.log ($scope.user_profile) 
}) 

調用該服務，

app.factory('friendProfileService', ['$http', function($http) { 
    return { 
    loadProfile: function() { 
     return $http.get('/users/4.json'); 
    } 
    }; 
}]) 

目前，我有返回URL users/4/.json硬編碼。我能否以某種方式獲取用戶ID？或者我必須在StateProvider中解決它？

Answer 1

您可以只添加id用戶內部狀態參數，以便從$stateParams可以很容易地讀取它。

url: '/{id}/{name}', //assuming user object has `id` property which has unique id. 

因此，儘管要實現AJAX，你可以直接做一個Ajax之前獲取用戶對象的用戶id。

控制器

friendProfileService.loadProfile($stateParams.id).then(function(response) { 
    $scope.user_profile = response.data; 
    console.log ($scope.user_profile) 
}) 

廠

app.factory('friendProfileService', ['$http', '$stateParams', function($http) { 
    return { 
    loadProfile: function(id) { 
     return $http.get('/users/'+ id +'json'); 
    } 
    }; 
}]) 

Answer 2

你說的對 - 控制器加載之前，你應該解決它：

$stateProvider 
    .state('friendprofile', { 
    url: '/{name}', 
    views: { 
     "friendProfile": { 
     templateUrl: '../assets/angular-app/templates/_friendProfile.html', 
     controller: 'friendProfileCtrl', 
     } 
    }, 
    resolve: { 
     user: function($stateParams, friendProfileService) { 
     friendProfileService.loadProfile($stateParams.name); 
     } 
    } 
    }) 

然後在控制器你可以注入CT user變量，它不是一個承諾，但解決數據已經：

app.controller('friendProfileCtrl', [ 
    '$scope', 
    'user', 
    ... 
    function($scope, user, ...) { 
    $scope.user_profile = user; 
    console.log($scope.user_profile) 
    } 
]); 

順便說一句爲ui-sref的值應該是類似的東西：friendprofile({name: user})

而且不要忘了輸入參數添加到loadProfile功能。可能您應該更好地將{name}參數重命名爲{id}