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

Laissez-moi jeter un oeil, il m'a fallu beaucoup de temps pour comprendre le but d'utiliser $rootScope, juste pour transférer une pièce d'identité~ C'est tout un combat...

Ne vous inquiétez pas de la raison pour laquelle la vue ne s'affiche pas. Laissez-moi vous expliquer la bonne manière.

La première est de savoir comment écrire 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)
        }
    }
})

Ensuite, avec cet état, la première vue peut s'écrire comme :

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

Il n'y a pas besoin de la méthode checkUserInfo dans le premier contrôleur ; il n'y a rien de mal avec la deuxième vue et il n'est pas nécessaire de la modifier ; le deuxième contrôleur est le suivant :

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

C'est tout. Ce que je renvoie dans resolve est une promesse, je dois donc utiliser la méthode then lors de sa réception dans le contrôleur. L'avantage de ceci est que cela vous donne une chance supplémentaire de faire autre chose avant que la requête http ne soit terminée (comme créer un statut de chargement ou autre chose) ; si vous n'en avez pas besoin, vous pouvez également y retourner resolve, comme ça Les données elles-mêmes sont obtenues directement dans le contrôleur. return $http.get(...).then(function(response) { return response.data })