ng-hide沒有動態更新

Question

我有下面的div元素與nghide

 <div ng-hide="showdiv" class="btnshowall"> 
    <a class="button button-block round outline"
       style="background: transparent !important;" >
      Show All
    </a>
 </div>

和控制器如下

.controller('mapCtrl', ['$scope', '$stateParams','User','$cordovaGeolocation','geoFireFac','GoogleMapFac','ConnectivityMonitor','PhysioFac','User',
function ($scope, $stateParams,User,$cordovaGeolocation,geoFireFac,GoogleMapFac,ConnectivityMonitor,PhysioFac,User) {

    console.log('called mapctrl');  
    GoogleMapFac.setUserLoc($scope.map);
    $scope.showdiv = User.getShowDiv();


}])

和用戶服務

.service('User', ['ToastFac',function(ToastFac){
    return {
         showDiv : false,
        changeShowDiv : function(){
            console.log('in changeShowDiv before change '+this.showDiv);
            this.showDiv = !this.showDiv;
            console.log('in changeShowDiv after change '+this.showDiv);

        },

        getShowDiv : function(){
            return this.showDiv;
        }

我從谷歌地圖的標記點擊事件調用User.changeShowDiv（），如下所示

google.maps.event.addListener(marker, 'click', function () {
      alert('store id '+marker.get('store_id'));
      if(User.showDiv){
          console.log('in if');
          User.changeShowDiv();
          console.log('User.showDiv '+User.showDiv);
      }
      else{
          console.log('in else');
          User.changeShowDiv();
          console.log('User.showDiv '+User.showDiv);
      }

});

日志按預期進行

in else
services.js:123 in changeShowDiv before change false
services.js:125 in changeShowDiv after change true
services.js:218 User.showDiv true
services.js:211 in if
services.js:123 in changeShowDiv before change true
services.js:125 in changeShowDiv after change false
services.js:213 User.showDiv false
services.js:216 in else
services.js:123 in changeShowDiv before change false
services.js:125 in changeShowDiv after change true
services.js:218 User.showDiv true

默認情況下，當User.showDiv變量為false時，showAll按鈕可見。 但是按鈕不是通過標記點擊事件隱藏和來的。

有人可以指導我，我錯過了什么。

Answer 1

來自AngularJS框架之外的事件需要使用$ apply引入AngularJS框架：

google.maps.event.addListener(marker, 'click', function () {
      alert('store id '+marker.get('store_id'));
      if(User.showDiv){
          console.log('in if');
          User.changeShowDiv();
          console.log('User.showDiv '+User.showDiv);
      }
      else{
          console.log('in else');
          User.changeShowDiv();
          console.log('User.showDiv '+User.showDiv);
      }
      //IMPORTANT
      $scope.$apply();    
});

AngularJS通過提供自己的事件處理循環來修改正常的JavaScript流。 這將JavaScript拆分為經典和AngularJS執行上下文。 只有在AngularJS執行上下文中應用的操作才能受益於AngularJS數據綁定，異常處理，屬性監視等...您還可以使用$apply()從JavaScript輸入AngularJS執行上下文。 請記住，在大多數地方（控制器，服務），已經通過處理事件的指令為您調用了$apply 。 僅在實現自定義事件回調或使用第三方庫回調時才需要顯式調用$apply 。

- AngularJS開發人員指南 - 與瀏覽器事件循環集成

---

也

務必修復ng-hide和控制器：

<div ng-hide="showdiv()" class="btnshowall">

$scope.showdiv = function() {
    return User.getShowDiv();
};

在上面的代碼中， ng-hide指令將在每個摘要周期上執行showdiv()函數，並相應地更新元素的可見性。

Answer 2

您只從User.getShowDiv方法中檢索一次值。 但是當它發生變化時，你不會更新showdiv范圍變量。 每次可以直接將User.getShowDiv方法的引用綁定到showdiv范圍變量時更新值，如下所示

$scope.showdiv = User.getShowDiv; 

在HTML上調用showdiv方法之后，最終將評估每個摘要周期的值，這與其他bindings不同。

ng-hide="showdiv()"

---

即便如此也無法解決您的問題。 基本上你是從外部上下文Angular更新一些變量，它是click事件。 所以你必須在click事件監聽器運行后更新值后立即手動運行摘要周期。 只需使用$timeout(angular.noop)安全地$timeout(angular.noop)摘要周期。

google.maps.event.addListener(marker, 'click', function () {
      alert('store id '+marker.get('store_id'));
      if(User.showDiv){
          //Code here
      }
      else{
          //Code here
      }
      //manually triggering digest loop to make binding in sync
      $timeout(angular.noop); //It will run new digest cycle.
});