Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/83.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript ng hide未得到动态更新_Javascript_Html_Angularjs_Google Maps_Ionic Framework - Fatal编程技术网

Javascript ng hide未得到动态更新

Javascript ng hide未得到动态更新,javascript,html,angularjs,google-maps,ionic-framework,Javascript,Html,Angularjs,Google Maps,Ionic Framework,我有下面的div元素和nghide 全部展示 和控制器如下所示 .controller('mapCtrl', ['$scope', '$stateParams','User','$cordovaGeolocation','geoFireFac','GoogleMapFac','ConnectivityMonitor','PhysioFac','User', function ($scope, $stateParams,User,$cordovaGeolocation,geoFireFac,G

我有下面的div元素和nghide


全部展示
和控制器如下所示

.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地图的marker click事件调用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按钮可见。但按钮并没有隐藏&来自于标记点击事件


有人能告诉我我遗漏了什么。

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

$scope.showdiv = User.getShowDiv; 
HTML上有一个after call
showdiv
方法,它最终将在每个摘要周期上计算值,这与其他
绑定不同

ng-hide="showdiv()"

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

来自AngularJS框架之外的事件需要通过以下方式引入AngularJS框架:

AngularJS通过提供自己的事件处理循环来修改正常的JavaScript流。这将JavaScript分为经典和AngularJS执行上下文。只有在AngularJS执行上下文中应用的操作才会受益于AngularJS数据绑定、异常处理、属性监视等。。。您还可以使用
$apply()
从JavaScript输入AngularJS执行上下文。请记住,在大多数地方(控制器、服务)
$apply
已由处理事件的指令为您调用。只有在实现自定义事件回调时,或者在使用第三方库回调时,才需要显式调用
$apply


产科加强生命支持 确保修复
ng hide
和控制器:

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

在上述代码中,
ng hide
指令将在每个摘要循环上执行
showdiv()
函数,并相应地更新元素的可见性

我试过这个。不幸的是,我失去了默认行为。我错过了一些东西。你能用这把小提琴纠正我吗@kpvsrkp给我第二个,更新我的答案:)我意识到我错过了一个关键点add@kpvsrkp检查更新的答案。。甚至你也可以参考乔治的答案。我们都有相同的东西:)太好了+1。愚蠢的我:(,我错过了这一点,我刚刚在帖子上看到你的编辑时意识到了这一点:)你一如既往地棒极了:)很明显,事件来自AngularJS框架之外
$evalAsync
更多地用于从AngularJS执行上下文内部调度异步操作。@Hadi
$evalAsync
/
$apply
/
$timeout
在这里的意义与我们从AngularJS外部世界手动运行事件的意义相同。但为了安全起见,我们应该使用
$evalAsync
$timeout
。谢谢回复@PankajParkar和georgeawgabe aware
$timeout
将导致额外的浏览器渲染周期和额外的$digest周期。在这种情况下不需要,但有些程序员这样做是为了“安全”。
<div ng-hide="showdiv()" class="btnshowall">
$scope.showdiv = function() {
    return User.getShowDiv();
};