javascript - 每当输入更改时更新指令

标签 javascript html angularjs angularjs-directive

首先,对于 angularJS 来说,很抱歉,如果这个问题很微不足道,但我的最终目标是在输入新的 markdown 文件时更改我的模板。所以现在我的指令看起来像这样:

app.directive('markdown', function() {
  return {
    restrict: 'E',
    replace: true, 
    scope: {
        fileinput: '='
    }, 
    compile: function(elem, attrs) {
        attrs.$observe("fileinput", function() {
            elem.replaceWith(marked(markdownString));
        });

    }
  }
});

我的 html 看起来像这样

<markDown md="test1.txt"></markDown>
<input type="file" name="filename" id="fileinput" ng-model="input">

其中test1.txt是一个markdown文件,我通过marked()函数将其转换为html。以下是我在 test1.txt 中的读取方式。

$("#fileinput").change(function (e) {
      if (e.target.files != undefined) {
        var reader = new FileReader();
        reader.onload = function (e) {
            markdownString = e.target.result;
        };
        reader.readAsText(e.target.files.item(0));
      }
    });

我可以完美地读取文件,但该指令将在我打开并读取文件之前替换 HTML,这很好,但我想更新该指令并让它在每次输入文件时再次运行。我已经尝试过 attrs.$observe 和scope.$watch,但似乎都不适合我,也许我只是写错了?

提前致谢!

编辑! Fiddle 在下面的帮助下,我能够获得 chanve 的输入,但现在它有延迟,不完全是我想要的。上传文件几次才能明白我的意思。谢谢

最佳答案

有一个lot of talk关于支持/不支持 Angular 中的 input type="file" ,但它们不支持绑定(bind)到它。关键问题似乎是您只能读取文件输入属性,而 Angular 的核心绑定(bind)概念是 2-way。

tldr:

您不能为此使用 ng-model,但您可以 do it manually .

关于javascript - 每当输入更改时更新指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24417646/

相关文章:

javascript - 在 SIRV S3 NodeJ 中的文件夹之间移动图像

javascript - chrome.storage.sync.get 与外部对象同步,但内部对象不同步?

javascript - 有什么方法可以自动加载 webpack 外部文件吗?

javascript - ng-message 没有显示

javascript - 如何通过在 javascript 中单击按钮来更改 css 类?

html - 使按钮 type=submit 看起来像 anchor 一样包裹

带有延迟的 JavaScript/jQuery 鼠标悬停事件

html - 有没有一种方法可以使用纯HTML5录制和重放音频?

javascript - angular $监视数组中所有对象的特定字段

AngularJS:具有多个模板的动态自定义指令