Angularjs ng-show无法与工厂中定义的功能一起使用



我使用的是Angular NG-Show指令来检查用户是否是管理员用户,如果他们是"显示"某些HTML元素。

我首先在我的mainController中创建了以下称为checkIfUserIsAdmin的功能:

 $scope.checkIfUserIsAdmin = function(){
        var userPrivilegeID = sharedFactory.userDetails.userPrivilegeID; 
        if(userPrivilegeID === 2){
            return true;
        }else{
            return false;
        }
    }

,在我的html中,我有以下内容:

<span ng-show="checkIfUserIsAdmin()"><i class="fa fa-check-circle"></i></span>

它与NG-Show合作良好,HTML正在按计划进行更改。

但是,我决定要在工厂中定义此功能,以便将其传递给多个控制器。

现在,当用户privilegeid更改视图时,视图不会更新(如NG-Show所应)。很抱歉,如果这是一个愚蠢的错误,但是我一直在努力弄清楚它,但没有在网上找到任何东西。你能帮忙吗?

sharedFactory.js

//create a factory so that we can pass these variables between different controllers. 
myApp.factory('sharedFactory', function(){
    //private variables
    var userDetails = {   
        "userID" : null,
        "userPrivilegeID" : 1,
        "isLoggedIn" : false
    }; 
    var checkIfUserIsAdmin = function(){
        var userPrivilegeID = userDetails.userPrivilegeID; 
        if(userPrivilegeID === 2){
            return true;
        }else{
            return false;
        }
    };
    //return public API so that we can access it in all controllers
    return{
        userDetails: userDetails,
        checkIfUserIsAdmin: checkIfUserIsAdmin
    };
});

maincontroller.js

 myApp.controller("mainController", function($scope, sharedFactory){
        $scope.checkIfUserIsAdmin = function(){
            return sharedFactory.checkIfUserIsAdmin; 
        }  
    });

index.html文件(此问题的最相关部分)

 <body data-ng-controller="mainController">
        <div id="container_wrapper">
            <div class="container"> 
                <span ng-show="checkIfUserIsAdmin()"><i class="fa fa-check-circle"></i></span>
                <div ng-view>
                    <!--our individual views will be displayed here-->
                </div>
            </div>
        </div>
    </body>

编辑:如上所述,用户privilegeid被初始化为1。但是,在我进行API调用后,它将其设置为2,但是NG-Show没有更新以显示HTML。这是我的loginFactory,其中包含API调用

myApp.factory('loginFactory', function($http, $timeout, $q, sharedFactory){
    //Methods which perform API calls 
    var checkLoginDetails = function(data){
        var deferred = $q.defer();
        $http({
            method: 'POST',
            url: 'http://localhost/API/auth?apiKey=0417883d',
            data : JSON.stringify(data),
            headers: {
               'Content-Type': 'application/json;charset=utf-8'
            },
            responseType:'json'
        }).then(function successCallback(response){
            if(response.hasOwnProperty('data') && response.data !== null){
                console.log(JSON.stringify(response.data));
                sharedFactory.userDetails = {
                   "userID" : response.data.userID,
                   "userPrivilegeID" : response.data.userPrivilegeID, 
                   "isLoggedIn" : true
                };
                $timeout(function() {
                    deferred.resolve(sharedFactory.userDetails);
                }, 100);
            }else{
                sharedFactory.buildErrorNotification(response);
            }
        },function errorCallback(response){
            sharedFactory.buildErrorNotification(response);
        });
        //return the userDetails promise
        return deferred.promise;
    };

    //return public API so that we can access it in all controllers
    return{
        checkLoginDetails: checkLoginDetails
    };
});

,然后在我的主构造器中,我有以下(调用CheckLogIndetails函数):

$scope.loginWithFacebook = function(){
    var data = {//...
    };
    loginFactory.checkLoginDetails(data).then(function(userDetails) {
        //Since the checkLoginDetails method (in the loginFactory) is performing a http request we need to use a promise
        //to store the userDetails (from the response) into our $scope.userDetails variable. 
        $scope.userDetails = userDetails;
    });
}  

您在呼叫服务功能的呼叫上离开了Parens。

 myApp.controller("mainController", function($scope, sharedFactory){
        $scope.checkIfUserIsAdmin = function(){
            return sharedFactory.checkIfUserIsAdmin(); //<-- Needs to actually call the function.
        }  
    });

将您的服务更改为这样的东西:

//create a factory so that we can pass these variables between different controllers. 
myApp.factory('sharedFactory', function(){
    //private variables
    var service = {
        userDetails: {   
            "userID" : null,
            "userPrivilegeID" : 1,
            "isLoggedIn" : false
        }
    };
    service.checkIfUserIsAdmin = function (){
        var userPrivilegeID = service.userDetails.userPrivilegeID; 
        if(userPrivilegeID === 2){
            return true;
        }else{
            return false;
        }
    };
    //return public API so that we can access it in all controllers
    return service;
});

最新更新