angulaire.js - Le contrôleur AngularJs obtient des données mais ne les affiche pas sur la page

Question

Cliquez sur le bouton dans la première vue et passez à la deuxième vue via le routeur ui. Les données peuvent être reçues dans le deuxième contrôleur et attribuées à $scope, mais elles ne sont pas affichées sur la page.
Première vue :

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

Méthode dans le premier contrôleur :

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

Deuxième vue :

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

Deuxième contrôleur :

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

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