我正在使用角度ng-show指令來檢查用戶是否是管理員用戶，如果他們是那麼我想要「顯示」某些html元素。AngularJS ng-show不能用我在工廠定義的函數工作

我首先在創建checkIfUserIsAdmin下面的函數叫我mainController：

$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秀和HTML運作良好在userPrivilegeID更改值時正在按計劃更改。

但是我決定我想在工廠定義這個函數，以便我可以將它傳遞給多個控制器。

但現在當userPrivilegeID更改視圖不更新（因爲它應該與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>

編輯：的userPrivilegeID是如上所示，初始化爲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 
    }; 
});

然後在我的mainController我有以下的（它調用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; 
    }); 

}

來源

2017-10-04 Sarah

看來，你沒有真正調用工廠函數，只是返回工廠函數。您需要將括號添加到控制器中的「checkIfUserIsAdmin」調用中。 – Baldy

@Baldy oops。謝謝。我現在就這樣做了。但它仍然無法按預期工作。多一點信息：你可以看到userPrivilegeID被初始化爲1。然後我對一個API做一個http請求，當我得到一個響應時，我將userPrivilege更新爲2.但是我希望html在這一點上可以隨ng-show而改變，但是他們不會。當我從http請求得到響應時，我使用promise。這是否會導致問題？謝謝 – Sarah

你可以分享API調用的代碼嗎？ –

你離開的括號在電話會議你的服務功能。

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

來源

2017-10-04 22:01:13

謝謝。請看我上面給「禿子」的評論，因爲它仍然沒有按預期工作。 – Sarah

在您的API承諾處理程序中，您正在設置'sharedFactory.userDetails'，但在您的'sharedFactory'服務中，'userDetails'是一個局部變量，而不是屬性。該局部變量保存在您的'checkIfUserIsAdmin'函數的閉包中。該函數從不查看作爲屬性存儲的值。 –

哦，是啊，我得到你。 userDetails變量只在最後從sharedFactory返回時變成全局變量。 – Sarah

AngularJS ng-show不能用我在工廠定義的函數工作

sharedFactory.js

mainController.js

index.html文件（對於這一問題的最相關的部分）

回答

相關問題