angular.js - AngularJs Controller obtains data but does not display it on the page

Question

Click the button in the first View and jump to the second View through the ui-router. The data can be received in the second controller and assigned to $scope, but it is not displayed on the page.
First View:

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

Method in the first controller:

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

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

Second 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

Here I go, it took me a long time to figure out the purpose of using $rootScope, just to transfer an ID~ It’s quite a struggle...

Don’t worry about why the view is not displayed. Let me tell you the correct way.

The first is how to write 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)
        }
    }
})

Then, with this state, the first view can be written as:

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

There is no need for the checkUserInfo method in the first controller; there is nothing wrong with the second view and no need to change it; the second controller is as follows:

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

That’s it. I'm in resolve 那里返回的是 promise，所以 controller 里接收的时候要用 then 方法。这样做的好处是可以在 http 请求完成之前有多一次机会让你干别的（比如弄个 loading 状态之类的事情）；如果你不需要，也可以在 resolve 那里返回 return $http.get(...).then(function(response) { return response.data }), so I can get the data itself directly in the controller.