1

我正在尝试构建一个自定义指令 - 并且有两个问题。看看下面的模板...

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：

该指令需要调用函数 - 将在模板内控件的某些事件上触发的函数。例如，这两个按钮应该调用特定范围的 memberCallback（clickOnInput，emptyInput）。我知道我可以使用“scope:true”为这种类型的成员创建一个新的范围 - 由于该指令可能在 HTML 部分中多次使用，因此每次使用都会生成许多这样的“人工”范围我的指令。到目前为止，一切都很好。

但是，这些回调的主体需要处理模板本身的元素。在示例中，您可以看到有一个 id 为 'btnF' 的输入控件，而我编写的原始代码（使用普通代码，没有指令）是使用 jQuery 通过 $('#btnF' 来“点击”它）。点击（）。

当输入成为指令模板的一部分时，我该如何处理？单个部分中可能有许多指令的实例化，所以我需要单独的 ID... '链接'函数被调用）但肯定有更好的方法吗？

问题2：

同样，模板包含对变量的绑定（例如“{{model.inpFilename}}”）。我想要的是通过指令参数传递这种变量，并让它们自动出现在指令的实现模板中。为了解释我的意思，想象最后，HTML 部分会说......

<div magic-directive-model="model.inpFilename1">
<div magic-directive-model="model.inpFilename2">

...并且这些 div 将被指令的模板替换 - 将模板内的 {{model.inpFilename}} 更改为指令调用正在使用的任何内容（也就是说，上面的两行将显示模板的两个“实例化”，并且在每一个内部，将使用传递的魔法指令模型内容而不是“model.inpFilename”。

我想用 AngularJS 指令做的事情是可能的，还是我走得太远了？

编辑：

我创建了一个plunker：

http://plnkr.co/edit/9qcKW5A6yq1hS8OuWTNK?p=preview

...并在这方面取得了重大进展。我几乎完成了，除了一件事：即使清除按钮 ('-') 清除绑定模型并且更改传播到 HTML 部分（即 {{model.filename}} 被清除），同样添加文件按钮 ('+') 不会发生 - 即使模型已更新，主页也不会。不仅如此，如果你再次点击“+”按钮，当对话框打开时，主页会更新为文件名，但 Chrome 会记录一个异常：“错误：尝试使用一个对象那不可用或不再可用。 ” - 而 Firefox 还记录“SecurityError”类型的“DOM 异常”。

知道为什么吗？

4

1 回答 1

0

我在 plunkr 中有一个错字——我在模板本身中使用了一个 ng-model 来存储文件数据（这不是我的意图，它是以前尝试的遗留物）。删除 data-ng-model="model.filedata" 解决了这个问题。

于 2013-10-09T13:21:46.120 回答