Директива AngularJS связывает функцию с несколькими аргументами

у меня возникли некоторые проблемы с привязкой функции, определенной в контроллере с функцией обратного вызова в директиве. Мой код выглядит следующим образом:

в моем контроллере:

$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?

2 67
angularjs angularjs-directive

2 ответа:

есть одна небольшая ошибка в вашем коде, пожалуйста, попробуйте код ниже, и он должен работать для вас 

<!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>
75

альтернативный метод, который переживет минификацию

оставьте ваш HTML как это было:

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

измените вызов:

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

обратите внимание на дополнительные открывающие и закрывающие скобки, данные onDrop. Это создаст экземпляр функции вместо того, чтобы вводить код функции.

почему это лучше

  1. изменение имен параметров в определении handleDrop () (или даже добавление еще нескольких, Если вы справитесь с этим правильно) не заставит вас изменить каждую из директив инъекций в html. гораздо суше.

  2. как предложил @TrueWill, я почти уверен, что другие решения не выдержат минификации, в то время как этот код остается с максимальной гибкостью и является агностиком имени.

еще одна личная причина-синтаксис объекта, который заставляет меня писать гораздо больше кода:

functionName({xName: x, yName: y})

(и добавление функции подпись в каждом вызове директивы)

как противостоять

functionName()(x,y)

(нулевое обслуживание вашего html)

Я нашел отличное решение здесь.

надеюсь, что помогает!

109