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

我正在从谷歌地图的标记点击事件中调用 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()"

---

即使以上也不能解决您的问题。基本上，您正在从外部上下文 Angular 更新一些变量，即 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 Developer Guide - Integration with the browser event loop

---

也

一定要修复ng-hide和控制器：

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

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

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