angular.js - AngularJs コントローラーはデータを取得しますが、ページには表示しません

Question

最初のビューのボタンをクリックし、ui-router を介して 2 番目のビューにジャンプします。データは 2 番目のコントローラーで受信され、$scope に割り当てられますが、ページには表示されません。
ファーストビュー:

世界只因有你 · Answer

見てみましょう、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查看

第一个控制器里就不需要 checkUserInfo 方法了；第二个视图没什么问题，不用改了；第二个控制器如下：

javascriptuserApp.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 })

ビューが表示されない理由については心配しないでください。正しい方法を教えてください。 🎜 🎜 1 つ目はui-router の書き方です: 🎜 リーリー 🎜 次に、この状態を使用して、最初のビューは次のように書くことができます: 🎜 リーリー 🎜最初のコントローラーには checkUserInfo メソッドは必要ありません。2 番目のビューには何も問題がないため、変更する必要はありません。 🎜 リーリー 🎜以上です。 resolve で返すものは Promise なので、コントローラーで受け取るときに then メソッドを使用する必要があります。この利点は、http リクエストが完了する前に別のこと (読み込みステータスの取得など) を行う機会がもう一度与えられることです。必要がない場合は、 でそこに戻ることもできます。 solve return $http.get(...).then(function(response) { return response.data }) により、データ自体をコントローラーで直接取得できます。 🎜

angular.js - AngularJs コントローラーはデータを取得しますが、ページには表示しません

全員に返信(1)返信します