谷歌翻页AngularJS指令

Question

有关此问题的改进解决方案,请参阅问题的底部

我现在已经尝试了一段时间来获得降落工作的指令.这是stackoverflow使用的完全相同的编辑器.Stackoverflow在此处提供此代码:

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

互联网上有一些版本,但都没有.我需要的是一个与所有编辑器按钮一起出现的内容,就像stackoverflow一样,当内联编码时,以及它作为ngRepeat的一部分内联时.

我希望这个指令在内联编码时使用,也可以在使用Angular 1.2.7版本的ng-repeat内部工作.我们需要的是,当模型数据发生变化时,指令需要更新页面向下视图以显示新的问题和答案.当用户更改向下翻页编辑区域时,指令需要能够更新模型.当用户单击[保存]时,需要将模型数据保存到数据库(或至少保存到另一个对象以确认其有效).

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

最重要的是我想使用Angular和jQuery 2.0.3的1.2.7版本.请注意,我发现版本1.2.2和1.2.7之间的非工作代码存在差异.我认为最好的解决方案适用于最新版本(1.2.7).

更新

我现在这个指令更简单,解决了我最近遇到的内容没有显示的问题.我强烈建议使用这个基于接受的答案的指令加上一些改进:https://github.com/kennyki/angular-pagedown

Answer 1

这是一个工作链接:

http://cssdeck.com/labs/qebukp9k

UPDATE

• 我做了一些优化.
• 我使用ngModel.$ formatters!不需要另外的$ watch.
• 我使用$ timeout然后使用scope.$ apply以避免$ digest进度错误.

Angular.js和性能

• 如果你达到性能可能你的应用程序使用太多$ watch/$ on.
• 根据我的经验,使用第三方库可能会导致所有类型的非高效/内存泄漏行为,主要是因为它没有考虑到angular/SPA.
• 我能够为一些库做一些智能集成,但有些只是不适合angular的世界.
• 如果您的应用程序必须显示1000多个问题,您应该从编写自定义转发器开始,并且更喜欢动态DOM插入.
• Angular.js在大量数据绑定方面表现不佳,除非你愿意写一些聪明的低级别的东西(当你知道如何时它真的很有趣!).
• 再次,更喜欢分页!正如Misko Hevery所说:"你不能在一个页面上向人类展示超过2000条信息.除此之外的任何东西都是非常糟糕的用户界面,人类无论如何都无法处理这个问题".
• 阅读: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();
        }
    }
});