AngularJS：如何收听DOM事件？

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

导读：我是AngularJS的新手,请原谅我这个转储问题. 我如何收听’click’或’mousemove’等’dom’事件？这就是我得到的(没有错误,但也没有导致控制台) //代码基于原始angularjs-seed. angular.module('myApp.controllers',[]). controller('MyCtrl1',['$scope',fu

我是AngularJS的新手,请原谅我这个转储问题.
我如何收听’click’或’mousemove’等’dom’事件？

这就是我得到的(没有错误,但也没有导致控制台)

//代码基于原始angularjs-seed.

angular.module('myApp.controllers',[]).
  controller('MyCtrl1',['$scope',function($scope) {

        $scope.$on('dragover',function() {
            console.log('dragover');
        });

        $scope.$on('click',function() {
            console.log('click');
        });

  }])

  .controller('MyCtrl2',[function() {

  }]);

在AngularJS中,事件通常由 directives处理.

Directives are a way to teach HTML new tricks. During DOM compilation
directives are matched against the HTML and executed. This allows
directives to register behavior,or transform the DOM.

对于“click”事件,您将使用ngClick指令：

HTML：

<button ng-click="doSomething()">Click me</button>

JS：

function MyCtrl($scope){
  $scope.doSomething = function(){
    // do something...
  };
}

对于“dragover”事件(以及Angular本机指令尚未涵盖的其他事件),您可以编写自己的指令：

HTML：

<div drop-target>Drop here</div>

JS：

angular.module('MyApp')
  .directive('dropTarget',function(){
    return function($scope,$element){
      $element.bind('dragover',function(){
        // do something when dragover event is observed
      });
    };
  })

（编辑：李大同）

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