Question

我有一个角度应用程序设置的一部分如下：

<section >
    <div ng-controller="setHeaderCtrl" class="navbar navbar-default header">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsed-bar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand brand-text" ui-sref="index">
                    <span class="sports-text">Sports</span>
                    <span class="gully-text">Gully</span>
                </a>
            </div>
            <div class="collapse navbar-collapse" id="collapsed-bar">
                <ul class="nav navbar-nav navbar-left" ng-if="searchingAway">
                    <li class="local-search-cont">
                         <input type="text" class="local-type-top" placeholder="Search">
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li ng-if="!userObject">
                        <a ng-click="showLogin()" class="navbar-txt-block" style="cursor: pointer;">
                            Login
                        </a>
                    </li>
                    <li ng-if="userObject.user">                                           
                        <a class="navbar-txt-block" ui-sref="home" style="cursor: pointer;">
                            Home
                        </a>
                    </li>
                    <li ng-if="userObject">    
                        {{userObject}}                
                        <a class="navbar-txt-block" style="cursor: pointer;">
                            {{userDetails.first_name}} {{userDetails.last_name}}
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>

我的setHeaderCtrl如下：

app.controller('setHeaderCtrl',['$scope', '$rootScope', '$http', '$state', 'Page', '$modal', 
    function($scope, $rootScope, $http, $state, Page, $modal){
        $rootScope.$on('userSet', function(){
            var authKey = $rootScope.authKey;
            $http.defaults.headers.common.Authorization = 'Token '+authKey;
            $http.get('/loginCheck/').success(function(data){
                $scope.userObject = data;
                    $scope.userDetails = data.user;
            });
        });
        $scope.userObject = {}
        $http.get('/loginCheck/').success(function(data){
            $scope.userObject.user = data;
            $scope.userDetails = data.user;
            console.log($scope.userDetails);
        }).error(function(data, status){
            if(status == 401){
                $scope.userObject.user = undefined;
            }
        });
        $rootScope.$on('setAwayHeader', function(){
            $scope.searchingAway = true;
        });
        $rootScope.$on('setIndexHeader', function(){
            $scope.searchingAway = false;
        });
        $scope.showLogin = function(){
            $modal.open({
                windowClass: 'modal fade login-modal', 
                templateUrl: '/static/partials/modals/loginModal.html',
                controller: 'loginCtrl'
            })
        }
    }
])

我的问题是{{userObject}}或{{userDetails}}永远不会显示。我可以保证服务器有响应，因为console.log显示正确的数据。

Answer 1

表达式ng-if="userObject"不好，总是如此。将其替换为boolean或userObject属性：ng-if="userObject.user"。 Jsfiddle

范围变量不会反映在模板中

1 个答案: