74

コントローラーで定義された関数をディレクティブのコールバック関数とバインドする際に問題があります。私のコードは次のようになります。

私のコントローラーで：

$scope.handleDrop = function ( elementId, file ) {
    console.log( 'handleDrop called' );
}

それから私の指令：

.directive( 'myDirective', function () {
    return {
      scope: {
        onDrop: '&'
      },
      link: function(scope, elem, attrs) {
        var myFile, elemId = [...]

        scope.onDrop(elemId, myFile);
      }
    } );

そして私のhtmlページで：

<my-directive on-drop="handleDrop"></my-directive>

上記のコードではうまくいきません。さまざまなチュートリアルで読んだことから、HTMLページで引数を指定することになっていることを理解していますか?

4

2 に答える 2

125

縮小に耐える代替方法

html はそのままにしておきます。

<my-directive on-drop="handleDrop"></my-directive>

呼び出しを次のように変更します。

scope.onDrop()('123','125')

に与えられた余分な開き括弧と閉じ括弧に注意してくださいonDrop。これにより、関数のコードを挿入する代わりに関数がインスタンス化されます。

なぜそれが良いのですか

  1. 定義内のパラメーターの名前を変更してhandleDrop()も (または、正しく処理する場合はさらに追加しても)、html 内の各ディレクティブ インジェクションは変更されません。はるかに乾燥しています。

  2. @TrueWill が示唆したように、他のソリューションが縮小に耐えられないことはほぼ確実ですが、この方法では、コードは最大限の柔軟性を維持し、名前に依存しません。

もう 1 つの個人的な理由は、オブジェクトの構文です。これにより、より多くのコードを記述できます。

functionName({xName: x, yName: y}) // (and adding the function signature in every directive call)

とは対照的に

functionName()(x,y) // (zero maintenance to your html)

私はこの素晴らしい解決策をここで見つけました。

于 2014-10-07T20:22:35.260 に答える
87

コードに小さな間違いが 1 つあります。以下のコードを試してみてください。うまくいくはずです。

<!doctype html>
<html ng-app="test">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>

  </head>
 <body ng-controller="test" >    


<!-- tabs -->
<div my-directive on-drop="handleDrop(elementId,file)"></div>

 <script>
     var app = angular.module('test', []);

     app.directive('myDirective', function () {
         return {
             scope: {
                 onDrop: '&'
             },
             link: function (scope, elem, attrs) {
                 var elementId = 123;
                 var file = 124;
                 scope.onDrop({elementId:'123',file:'125'});

             }
         }
     });

     app.controller('test', function ($scope) {
         alert("inside test");
         $scope.handleDrop = function (elementId, file) {
             alert(file);
         }
     });

   </script>
</body>


</html>
于 2013-09-24T06:01:07.293 に答える