angular.js - AngularJs Controller获取到数据，但是页面上不显示

Question

第一个View中点击按钮，通过ui-router跳转按钮到第二个View，在第二个controller中能接收到数据，赋值给$scope,但是页面上没显示。
第一个View：

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

第一个controller中的方法：

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

第二个View：

<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>

第二个controller：

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; //赋值后页面不显示
        })
    })
}])

ui-router:

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