Google pagedown AngularJS directive

Question

See bottom of question for an improved solution to this problem

I have been trying for some time now to get a directive for the pagedown

Answer 1

Here is a working link:

http://cssdeck.com/labs/qebukp9k

UPDATE

• I made some optimizations.
• I use ngModel.$formatters ! no need for another $watch.
• I use $timeout and then scope.$apply to avoid $digest in progress errors.

Angular.js & Performance

• If you hit performance maybe your application is using too many $watch / $on.
• In my experience, using 3rd-party libraries can cause all sort of non efficient / memory leaking behavior, mostly because it was not implemented with angular / SPA in mind.
• I was able to do some smart integration for some libraries but some just don't fit well to angular's world.
• If your application must show 1000+ questions you should probably start with writing your custom repeater, and prefer dynamic DOM insertions.
• Angular.js will not perform well with tons of data bindings unless you are willing to write some smart lower level stuff (It's actually fun when you know how!).
• Again, prefer pagination! As Misko Hevery says: "You can't really show more than about 2000 pieces of information to a human on a single page. Anything more than that is really bad UI, and humans can't process this anyway".
• Read this: How does data binding work in AngularJS?
• I'm more than happy to help you, but First let me show the code (contact me)..

Solution:

var app = angular.module('App', []);

app.directive('pagedownAdmin', function ($compile, $timeout) {
    var nextId = 0;
    var converter = Markdown.getSanitizingConverter();
    converter.hooks.chain("preBlockGamut", function (text, rbg) {
        return text.replace(/^ {0,3}""" *\n((?:.*?\n)+?) {0,3}""" *$/gm, function (whole, inner) {
            return "
" + rbg(inner) + "
\n";
        });
    });

    return {
        require: 'ngModel',
        replace: true,
        template: '
',
        link: function (scope, iElement, attrs, ngModel) {

            var editorUniqueId;

            if (attrs.id == null) {
                editorUniqueId = nextId++;
            } else {
                editorUniqueId = attrs.id;
            }

            var newElement = $compile(
                '
' +
                   '
' +
                      '
' +
                      '' +
                      '' +
                   '
' +
                   '
' +
                '
')(scope);

            iElement.html(newElement);

            var help = function () {
                alert("There is no help");
            }

            var editor = new Markdown.Editor(converter, "-" + editorUniqueId, {
                handler: help
            });

            var $wmdInput = iElement.find('#wmd-input-' + editorUniqueId);

            var init = false;

            editor.hooks.chain("onPreviewRefresh", function () {
              var val = $wmdInput.val();
              if (init && val !== ngModel.$modelValue ) {
                $timeout(function(){
                  scope.$apply(function(){
                    ngModel.$setViewValue(val);
                    ngModel.$render();
                  });
                });
              }              
            });

            ngModel.$formatters.push(function(value){
              init = true;
              $wmdInput.val(value);
              editor.refreshPreview();
              return value;
            });

            editor.run();
        }
    }
});