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

한 번 살펴보겠습니다. 단지 ID를 전달하기 위해 $rootScope를 사용하는 목적을 이해하는 데 오랜 시간이 걸렸습니다~ 꽤 고생했습니다...$rootScope 的目的，就为了传个 ID 啊～也蛮拼的……

你也别纠结为什么视图不显示了，还是跟你讲一下正确的做法吧。

首先是 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)
        }
    }
})

然后，有了这个 state 之后，第一个视图就可以写成：

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

第一个控制器里就不需要 checkUserInfo 方法了；第二个视图没什么问题，不用改了；第二个控制器如下：

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

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

뷰가 표시되지 않는 이유는 걱정하지 마세요. 올바른 방법을 알려드리겠습니다. 🎜 🎜첫 번째는 ui-router 작성 방법입니다. 🎜 으아악 🎜이 상태를 사용하면 첫 번째 뷰는 다음과 같이 작성할 수 있습니다. 🎜 으아악 🎜첫 번째 컨트롤러에는 checkUserInfo 메서드가 필요하지 않습니다. 두 번째 뷰에는 아무런 문제가 없으며 두 번째 컨트롤러를 변경할 필요도 없습니다. 🎜 으아악 🎜그렇습니다. resolve에서 반환하는 것은 Promise이므로 컨트롤러에서 이를 수신할 때 then 메서드를 사용해야 합니다. 이것의 장점은 http 요청이 완료되기 전에 다른 작업(예: 로딩 상태 가져오기 등)을 수행할 수 있는 기회를 한 번 더 제공한다는 것입니다. 필요하지 않은 경우 로 반환할 수도 있습니다. 해결 return $http.get(...).then(function(response) { return response.data })를 사용하면 데이터 자체를 컨트롤러에서 직접 얻을 수 있습니다. 🎜