Integrating into AngularJS

[codemwnci]

I am using this with Angular JS, and as it is a textarea element, this generally works well...However, if I use the buttons to update the markdown text (i.e. add bold/italics, etc), this is not picked up by the AngularJS event loop.

[marius-stanescu]

+1 It's the same with knockout.js. I think the buttons (bold, italic, etc.) should trigger the change event on the textarea. Here is the code to add at the end of every button's callback function:

e.$textarea.change();

Or you can add this line, just one time, in the __handle function:

this.$textarea.change();

[jamhall]

If anyone is experiencing this and you don't want to change the source code or add a line of code to every buttons callback function then you can solve this problem by using a directive like this:

  app.directive("markdownEditor", function () {
    return {
      restrict: "A",
      require:  'ngModel',
      link:     function (scope, element, attrs, ngModel) {
        $(element).markdown({
          savable:false,
          onChange: function(e){
            ngModel.$setViewValue(e.getContent());
          }
        });
      }
    }
  });

And to use:

<div markdown-editor></div>

[adamzerner]

@jamhall I like the idea to use a directive, but:

1) the div needs an ng-model attribute, otherwise you get a compile error saying it can't find ngModel.

2) It's not working for me. a) The preview doesn't show things with their styles. b) It doesn't update the scope. I tried adding scope.$apply() to onChange, but that didn't work either. My code.

[jamhall]

@adamzerner - yes, you need to use ngModel, otherwise how are you going to update your scope? For preview to work, it requires an extra dependency as stated in the docs:

The preview functionalities and html to markdown conversion are provided by 3rd party codes : markdown-js, marked (default failover if markdown-js lib not available) and to-markdown. Without them, this plugin would still work and convert the content as-is, so you could easily modify those functionalities yourself via available hooks.

http://www.codingdrama.com/bootstrap-markdown/ (at the bottom of the page)

[adamzerner]

@jamhall

1) I see. I'm a bit inexperienced and haven't worked with require in the DDO before. When you used the example of <div markdown-editor></div> I didn't realize that adding ng-model was implied.

2) Gotcha. I got it working.

Thank you!

[jamhall]

Hey @adamzerner . Sorry, yeah, I should have added ng-model to my example. Oops!

Great that you've got it working :)