BinaryDevelop
  1. ホーム
  2. angularjs

複数の引数を持つ関数を束ねるAngularJSディレクティブ

2023-09-19 12:15:45

質問

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

私のコントローラでは 

$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ページで引数を指定することになっている理解していますか？

どのように解決するのですか？

あなたのコードに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>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します