javascript - ng-hide 没有动态更新

Question

我有下面的带有 nghide 的 div 元素

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

和 Controller 如下

.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 modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc... You can also use $apply() to enter the AngularJS execution context from JavaScript. Keep in mind that in most places (controllers, services) $apply has already been called for you by the directive which is handling the event. An explicit call to $apply is needed only when implementing custom event callbacks, or when working with third-party library callbacks.

— AngularJS Developer Guide - Integration with the browser event loop

---

还有

一定要修复 ng-hide 和 Controller :

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

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

在上面的代码中，ng-hide 指令将在每个摘要周期执行 showdiv() 函数并相应地更新元素的可见性。