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

У меня возникли проблемы с привязкой функции, определенной в контроллере, с функцией обратного вызова в директиве. Мой код выглядит следующим образом:Директива 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?

источник

2013-09-24 Joseph Paterson

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

<!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-24 06:01:07

Где это поведение определено в Угловой документации? –

В документах не существует актуальной темы, но тема - это функция связывания директив, http://docs.angularjs.org/guide/directive – tommybananas

По-видимому, имена параметров должны точно совпадать с разметкой; Интересно, выживет ли это из-за минимума? – TrueWill

100

Альтернативный метод, который будет выжить минификация

оставить свой HTML, как это было:

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

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

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

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

Почему лучше

изменения имена параметров в handleDrop() определение (или даже добавить еще, если вы справиться с этим правильно) не заставит вас изменить каждый из директив инъекции в html. много DRYer.
как @TrueМы предположим, что я почти уверен, что другие решения не выживут при минимизации, в то время как этот код остается с максимальной гибкостью и является агностиком.

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

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

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

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

functionName()(x,y)

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

Я нашел это большое решение here.

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

источник

2014-10-07 20:22:35 nurinur

Это работало и для меня, но у меня была проблема с использованием объектной нотации. Явное использование классов в TypScript. [этот комментарий] (http://stackoverflow.com/questions/38777903/invoking-function-breaks-scope?noredirect1_comment64927293_38777903) помог мне исправить это. –

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

ответ

Смежные вопросы