9

私は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() {

  }]);
4

2 に答える 2

27

AngularJS では、イベントは通常、ディレクティブによって処理されます。

ディレクティブは、HTML の新しいトリックを教える方法です。DOM のコンパイル中に、ディレクティブが HTML と照合され、実行されます。これにより、ディレクティブは動作を登録したり、DOM を変換したりできます。

「クリック」イベントには、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
      });
    };
  })
于 2013-06-30T15:15:55.003 に答える
1

ngClick と ngMouseover はすぐに使用できますが、ドラッグ イベント用に独自のディレクティブを作成するか、作成済みのサードパーティ モジュールを使用する必要があります。このドラッグ アンド ドロップ モジュールを自分のコードで動作させることができました。

https://www.npmjs.org/package/angular-draganddrop

于 2014-03-18T21:54:29.233 に答える