첫 번째 View에서 버튼을 클릭하고 ui-router를 통해 두 번째 View로 점프합니다. 두 번째 컨트롤러에서 데이터를 받아 $scope에 할당할 수 있지만 페이지에는 표시되지 않습니다.
첫 번째 보기:
첫 번째 컨트롤러의 메서드:
으아아아두 번째 보기:
으아아아두 번째 컨트롤러:
으아아아UI-라우터:
으아아아世界只因有你2017-05-15 16:56:16
한 번 살펴보겠습니다. 단지 ID를 전달하기 위해 $rootScope
를 사용하는 목적을 이해하는 데 오랜 시간이 걸렸습니다~ 꽤 고생했습니다...$rootScope
的目的,就为了传个 ID 啊~也蛮拼的……
你也别纠结为什么视图不显示了,还是跟你讲一下正确的做法吧。
首先是 ui-router 的写法:
javascript
.state('index.usermng.userInfo', { url: '/userInfo/:id', templateUrl: 'tpls/userInfo.html', controller: 'userInfoCtrl', resolve: { userInfo: function($http, serverUrl, $stateParams) { return $http.get(serverUrl + "/user/info?userId=" + $stateParams.id) } } })
然后,有了这个 state 之后,第一个视图就可以写成:
html
<a ui-sref="index.usermng.userInfo({id: item.id})" class="btn btn-primary">查看</a>
第一个控制器里就不需要 checkUserInfo
方法了;第二个视图没什么问题,不用改了;第二个控制器如下:
javascript
userApp.controller('userInfoCtrl', function($scope, userInfo) { userInfo.then(function(response) { $scope.data = response.data }) })
就这样。我在 resolve
那里返回的是 promise,所以 controller 里接收的时候要用 then
方法。这样做的好处是可以在 http 请求完成之前有多一次机会让你干别的(比如弄个 loading 状态之类的事情);如果你不需要,也可以在 resolve
那里返回 return $http.get(...).then(function(response) { return response.data })
checkUserInfo
메서드가 필요하지 않습니다. 두 번째 뷰에는 아무런 문제가 없으며 두 번째 컨트롤러를 변경할 필요도 없습니다. 🎜
으아악
🎜그렇습니다. resolve
에서 반환하는 것은 Promise이므로 컨트롤러에서 이를 수신할 때 then
메서드를 사용해야 합니다. 이것의 장점은 http 요청이 완료되기 전에 다른 작업(예: 로딩 상태 가져오기 등)을 수행할 수 있는 기회를 한 번 더 제공한다는 것입니다. 필요하지 않은 경우 로 반환할 수도 있습니다. 해결
return $http.get(...).then(function(response) { return response.data })
를 사용하면 데이터 자체를 컨트롤러에서 직접 얻을 수 있습니다. 🎜