angularjs – Angular的$watch的奇怪行为

发布时间：2020-12-17 17:35:13 所属栏目：安全来源：网络整理

导读：今天我在使用$watch的AngularJS中遇到了一些非常奇怪的行为.我将代码简化为以下示例： https://jsfiddle.net/yLeLuard/ 此示例包含将跟踪状态变量的服务.指令用于将click事件绑定到DOM,通过服务更改状态变量. 这个例子有两个问题：第一个关闭按钮(上面带有n

今天我在使用$watch的AngularJS中遇到了一些非常奇怪的行为.我将代码简化为以下示例：

https://jsfiddle.net/yLeLuard/

此示例包含将跟踪状态变量的服务.指令用于将click事件绑定到DOM,通过服务更改状态变量.

这个例子有两个问题：

>第一个关闭按钮(上面带有ng-click属性)仅更改第二次单击时的状态
>没有ng-click的两个按钮根本不会改变状态

main.html中

<div ng-controller="main">
  State: {{ api.isOpen | json }}
  <div ng-click="" open>
    <button>Open - Working fine</button>
  </div>
  <div ng-click="" close>
    <button>Close - Works,but only on second click</button>
  </div>
  <div open>
    <button>Open - Not Working</button>
  </div>
  <div close>
    <button>Close - Not Working</button>
  </div>
</div>

main.js

var myApp = angular.module('myApp',[]);

myApp.controller('main',['$scope','state',function($scope,state) {
  $scope.api = state;

  $scope.api.isOpen = false;

  $scope.$watch('api.isOpen',function() {
    console.log('state has changed');
  });
}]);

myApp.directive('open',['state',function(state) {
  return {
    restrict: 'A',scope: {},replace: true,template: '<button>Open</button>',link: function(scope,element) {
      element.on('click',function() {
        state.isOpen = true;
      });
    }
  };
}]);


myApp.directive('close',template: '<button>Close</button>',function() {
        state.isOpen = false;
      });
    }
  };
}]);

myApp.service('state',function() {
  return {
    isOpen: null
  };
});

解决方法

那是因为您在点击时使用了本机事件监听器.此事件是异步的,不属于Angular摘要周期,因此您需要手动消化范围.

myApp.directive('open',function() {
        scope.$apply(function() {
          state.isOpen = true;
        });
      });
    }
  };
}]);

固定小提琴：https://jsfiddle.net/7h95ct1y/

我建议直接在ng-click中更改状态：ng-click =“api.isOpen = true”

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!