未动态更新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('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;
        }

我正在从google的标记单击事件调用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

您只从User.getShowDiv方法检索一次值。但是，当它得到更改时，您将不会更新showdiv作用域变量。每次更新值，可以将User.getShowDiv方法的引用直接绑定到showdiv作用域变量，如下所示

$scope.showdiv = User.getShowDiv; 

然后调用HTML上的showdiv方法，与其他bindings不同，该方法最终将计算每个摘要周期的值。

ng-hide="showdiv()"

即使在上面也解决不了你的问题。基本上，您正在从外部上下文角度更新一些变量，即click事件。因此，您必须在更新click事件侦听器运行的值之后立即手动运行摘要周期。只需使用$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.
});

Answer 2

来自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()函数，并相应地更新元素的可见性。