Updating directive whenever input change

Question

First off, new to angularJS so sorry if this question is trivial but my end goal is to change my template whenever a new markdown file is inputed. So right now my directive is looking like this:

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

    }
  }
});

My html is looking like is looking like this

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

Where test1.txt is a markdown file that I convert viat the marked() function into html. Below is how I read in 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));
      }
    });

I can read in a file perfectly, but the the directive will replace the HTML before I have opened and read the file, which is fine, but I want to update the directive and have it run again whenever I input a file. I've tried both attrs.$observe and scope.$watch, but neither seem to be working for me, perhaps I am just writing them incorrectly?

Thanks in advanced!

Edit! Fiddle With the below help I was able to get the input to chanve, but now it's on a delay, not quite what I wanted. Upload files a couple times to see what I mean. Thank you

Put this into a jsfiddle or plunker and post the link

Jonathan Wilson
– Jonathan Wilson

2014-06-25 20:17:42 +00:00
Commented Jun 25, 2014 at 20:17 — Jonathan Wilson
– Jonathan Wilson, Commented Jun 25, 2014 at 20:17

SimplGy · Accepted Answer · 2014-06-25 20:19:53Z

1

There's a lot of talk about supporting/not supporting input type="file" in angular, but they do not support binding to it. The key issue seems to be that you can only read file input properties and Angular's core binding concept is 2-way.

tldr:

You can't use an ng-model for this, but you can do it manually.

answered Jun 25, 2014 at 20:19

SimplGy

20.5k15 gold badges112 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2872493 Over a year ago

Thanks for your swift help, but it seems to update on a delay of one input. Here is the fiddle link. When you add a file it seems to update the previous one. This is so close to the result I want but just slightly off!

Collectives™ on Stack Overflow

Updating directive whenever input change

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related