angularjs - Google pagedown AngularJS 指令

Question

See bottom of question for an improved solution to this problem

我已经尝试了一段时间来获得向下翻页工作的指令。这与 stackoverflow 使用的编辑器完全相同。 Stackoverflow 在此提供此代码:

https://code.google.com/p/pagedown/

互联网上有一些版本，但没有一个运行良好。我需要的是一个会与所有编辑器按钮一起出现的按钮，就像 stackoverflow 一样，在内联编码时以及作为 ngRepeat 的一部分内联时。

我想让这个指令在使用 Angular 版本 1.2.7 进行内联编码以及在 ng-repeat 中工作时起作用。需要的是，当模型数据更改时，指令需要更新翻页 View 以显示新的问题和答案。当用户更改向下翻页编辑区域时，指令需要能够更新模型。当用户单击[保存]时，模型数据需要保存到数据库(或至少保存到另一个对象以确认其有效)。

该指令需要能够响应模型中的更改，并在按键时或在编辑 Pane 中按下“更改”按钮时将其原始数据保存到模型中。这是我到目前为止所拥有的。请注意，此版本没有 $wmdInput.on('change' 但它是所需内容的开始。

最重要的是，我希望它可以与 Angular 和 jQuery 2.0.3 版本 1.2.7 一起使用，请注意，我发现与我的非工作代码存在差异版本 1.2.2 和 1.2.7 之间。我认为最好有任何解决方案适用于最新版本(1.2.7)。

更新

I now this directive which is simpler and solves some recent problems I had with the content not showing. I would highly recommend using this directive which is based on the answer accepted plus a few improvements: https://github.com/kennyki/angular-pagedown

Answer 1

这是一个工作链接:

http://cssdeck.com/labs/qebukp9k

更新

• 我做了一些优化。
• 我使用 ngModel.$formatters !不需要另一个$ watch 。
• 我使用 $timeout，然后使用 range.$apply 来避免 $digest 进行中错误。

Angular.js 和性能

• 如果您的性能受到影响，则可能您的应用程序使用了过多的 $watch/$on。
• 根据我的经验，使用第 3 方库可能会导致各种低效/内存泄漏行为，主要是因为它没有考虑到 Angular/SPA 来实现。
• 我能够对某些库进行一些智能集成，但有些库不太适合 Angular 的世界。
• 如果您的应用必须显示 1000 多个问题，您可能应该从编写自定义转发器开始，并且更喜欢动态 DOM 插入。
• Angular.js 在处理大量数据绑定(bind)时表现不佳，除非您愿意编写一些智能的底层内容(当您知道如何编写时，这实际上很有趣!)。
• 再次强调，更喜欢分页!正如 Misko Hevery 所说:“你无法真正在一个页面上向人类显示超过 2000 条信息。超过的信息都是非常糟糕的 UI，人类无论如何也无法处理它”。
• 阅读此内容:How does data binding work in AngularJS?
• 我非常乐意为您提供帮助，但首先让我显示代码(与我联系)..

解决方案:

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 "<blockquote>" + rbg(inner) + "</blockquote>\n";
        });
    });

    return {
        require: 'ngModel',
        replace: true,
        template: '<div class="pagedown-bootstrap-editor"></div>',
        link: function (scope, iElement, attrs, ngModel) {

            var editorUniqueId;

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

            var newElement = $compile(
                '<div>' +
                   '<div class="wmd-panel">' +
                      '<div id="wmd-button-bar-' + editorUniqueId + '"></div>' +
                      '<textarea class="wmd-input" id="wmd-input-' + editorUniqueId + '">' +
                      '</textarea>' +
                   '</div>' +
                   '<div id="wmd-preview-' + editorUniqueId + '" class="pagedown-preview wmd-panel wmd-preview"></div>' +
                '</div>')(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();
        }
    }
});