Skip to content

Editor does not show up if directive is inside a dynamically added element, e.g. due to ng-if #17

Closed
@DGJones

Description

@DGJones

Hi,

This issue, #13, is still a problem as far as I can tell. If the directive is fired after the document.ready runs then bootstrap-markdown will not have initialized the newly added textarea element.

This is a snippet of html that exposes the problem:

<div ng-if="editing === false" marked='comment.value' class='markdown acl-comment-text'></div>
<textarea ng-if="editing === true" 
   data-provide='markdown'
   markdown-editor='{"autofocus": true}'
   name='x' 
   ng-model='comment.value' 
   rows="5">
</textarea>

To initialize the element with bootstrap-markdown I added the following:

 link: function(scope, element, attrs, ngModel) {
          var options = scope.$eval(attrs.markdownEditor);

            // Only initialize the $.markdown plugin once.
            if (! element.hasClass('processed')) {
                element.addClass('processed');

                // if the directive was called after document.ready, e.g. because of ng-if then the element 
		// will not have been initialized by bootstrap-markdown
		if (element.markdown === undefined){
		    element.data('markdown', (data = new $.fn.markdown.Constructor(element[0], {})))
	        }	

                // Setup the markdown WYSIWYG.
                element.markdown({

I've forked the repository and will submit a pull request.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions