Я пытаюсь создать пользовательскую директиву - и у вас есть две проблемы. Посмотрите на следующий шаблон ...Директива AngularJS: как связать шаблоны с действиями и пройденными моделями?
restrict: 'A',
require: '?ngModel',
template: '<div>' +
'<button style="width:30px" data-ng-click="clickOnInput()">+</button>' +
'<button style="width:30px" data-ng-click="emptyInput()">-</button>' +
'<a style="cursor:pointer; text-decoration:underline; width:120px; max-width:120px" ' +
' data-ng-click="download()">{{model.inpFilename}}</a>' +
'<input id="btnF" style="position:absolute; opacity:0; top:0px; right:0px" ' +
' type="file" data-ng-model="model.fileUpload" data-np-filereader/>' +
'</div>',
scope: true,
link: function(scope, element, attrs, ngModel) {
if(!ngModel) return;
$scope.clickOnInput = function() {
$('#btnF').click();
}
...
Задача 1:
директива должна вызывать функции - функции, которые будут срабатывать на некоторые события из элементов управления внутри шаблона. Например, две кнопки должны вызывать конкретную область действия scopeCallback (clickOnInput, emptyInput). Я понимаю, что я могу создать новую область для такого типа членов, используя «scope: true» - и поскольку директива может использоваться несколько раз внутри частичных HTML-фрагментов, будет много таких «искусственных» областей, сгенерированных для каждого использования моей директивы. Все идет нормально.
Однако тело этих обратных вызовов должно работать с элементами самого шаблона. В этом примере вы можете увидеть, что есть элемент управления ввода с идентификатором «btnF», а исходный код, который я написал (с использованием обычного кода, никаких директив), использовал jQuery для «щелчка» по нему через $ ('# btnF') .click().
Как мне справиться с этим, когда вход становится частью шаблона директивы? Может быть много экземпляров директивы внутри одной частичной части, поэтому мне нужны отдельные идентификаторы ... Я полагаю, что могу самостоятельно создавать искусственные идентификаторы ('id' + someGlobalCounter ++) и, возможно, вводить их в шаблон всякий раз, когда это реализуется (т. Е. Когда называется функция «link»), но, конечно, есть лучший способ?
Проблема 2:
Аналогично, шаблон содержит bindinds на переменные (например, "{{model.inpFilename}}"). Я хочу передать такие переменные через параметр директивы и автоматически их включить внутри реализованного шаблона директивы. Для того, чтобы объяснить, что я имею в виду, представьте себе, что в конце концов, HTML парциальное будет сказать ...
<div magic-directive-model="model.inpFilename1">
<div magic-directive-model="model.inpFilename2">
... и эти дивы будут заменены на шаблоне директивы - изменение {{}} model.inpFilename внутри шаблон, независимо от того, каким образом использовался указатель директивы (то есть две строки, приведенные выше, должны были бы отображать два «экземпляра» шаблона, и внутри каждого из них вместо «model.inpFilename» будет использоваться переданное содержимое модели магии.
Это то, что я пытаюсь сделать это возможно с директивами AngularJS, или я зашел слишком далеко?
EDIT:
Я создал plunker:
http://plnkr.co/edit/9qcKW5A6yq1hS8OuWTNK?p=preview
... и значительно продвинулись вперед с этим. Я почти закончил, за исключением одного: даже если кнопка очистки ('-') очищает связанную модель и изменение распространяется до частичного HTML (то есть {{model.filename}} очищается), то же самое не происходит для кнопки добавления файла ('+') - даже если модель обновлена, на главной странице нет. Не только это, но если вы нажмете кнопку «+», то при открытии диалога на главной странице будет обновлено с именем файла, но Chrome регистрирует одну черту исключения: «Ошибка: попытка была сделана для используйте объект, который не используется или больше не используется. "- в то время как Firefox также регистрирует" DOM Exception "типа" SecurityError ".
Любая идея, почему?