angular.js - Pengawal AngularJs memperoleh data tetapi tidak memaparkannya pada halaman

Question

Klik butang dalam Paparan pertama dan lompat ke Paparan kedua melalui penghala-ui Data boleh diterima dalam pengawal kedua dan diberikan kepada $scope, tetapi ia tidak dipaparkan pada halaman.
Pandangan Pertama:

 <a type="button" ui-sref="index.usermng.userInfo" ng-click="checkUserInfo(item.id)" class="btn btn-primary">查看</a>

Kaedah dalam pengawal pertama:

$scope.checkUserInfo = function(userId) {
    $rootScope.$broadcast('toUserInfo', userId);
}

Paparan Kedua:

<p class="tab-pane active tab-chrome" id="tab-chrome">
    <p class="row feature">
        <p class="col-md-12">
            <ul class="list-group">
                <li class="list-group-item">UserId：{{data.user.userId}}</li>
                <li class="list-group-item">Name：{{data.user.name}}</li>
                <li class="list-group-item">Sex：{{data.user.sex}}</li>
                <li class="list-group-item">Birthday：{{data.user.birthday | date:'yyyy-MM-dd'}}</li>
                <li class="list-group-item">Mobile：{{data.user.mobile}}</li>
            </ul>
        </p>
    </p>
</p>

Pengawal kedua:

userApp.controller('userInfoCtrl', ['$scope', '$http', '$rootScope', 'serverUrl', function($scope, $http, $rootScope, serverUrl) {
    $rootScope.$on('toUserInfo', function(event, userId) {
        console.log(userId); //能获取到ID
        $scope.userId = userId;
        $http.get(serverUrl + "/user/info?userId=" + userId).success(function(data) {
            console.log(data); //有data
            $scope.data = data.data; //赋值后页面不显示
        })
    })
}])

penghala ui:

.state('index.usermng.userInfo',{
    url: '/userInfo',
    templateUrl: 'tpls/userInfo.html',
    controller: 'userInfoCtrl'
})

Answer 1

Biar saya lihat, saya mengambil masa yang lama untuk memahami tujuan menggunakan $rootScope, hanya untuk memindahkan ID~ Ia agak sukar...

Jangan risau tentang sebab paparan tidak dipaparkan.

Pertama ialah cara menulis 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)
        }
    }
})

Kemudian, dengan keadaan ini, paparan pertama boleh ditulis sebagai:

html<a ui-sref="index.usermng.userInfo({id: item.id})" class="btn btn-primary">查看</a>

Tidak perlu kaedah checkUserInfo dalam pengawal pertama; tidak ada yang salah dengan pandangan kedua dan tidak perlu menukarnya adalah seperti berikut:

javascriptuserApp.controller('userInfoCtrl', function($scope, userInfo) {
    userInfo.then(function(response) {
        $scope.data = response.data
    })
})

Itu sahaja. Apa yang saya pulangkan dalam resolve ialah janji, jadi saya perlu menggunakan kaedah then apabila menerimanya dalam pengawal. Kelebihan ini ialah ia memberi anda satu lagi peluang untuk melakukan sesuatu yang lain sebelum permintaan http selesai (seperti membuat status pemuatan atau sesuatu jika anda tidak memerlukannya, anda juga boleh kembali resolve di sana, seperti ini Data itu sendiri diperoleh secara langsung dalam pengawal. return $http.get(...).then(function(response) { return response.data })