谷歌PageDown键AngularJS指令 [英] Google pagedown AngularJS directive

问题描述

  

请参阅问题底部的一种改进的解决这个问题。

我一直在尝试了一段时间，现在得到了下页的工作指令。这是通过计算器使用的完全相同的编辑器。计算器使这里提供这个code：

的https：//$c$c.google.com/p/pagedown/

有一些版本在那里在互联网上，但没有很好地工作。我需要的是一个将所有的编辑按钮就像计算器出现既当codeD内联时，它的内联也作为ngRepeat的一部分。

我想提出这个指令工作时，它的codeD内联，也采用了棱角分明的版本1.2.7的NG-重复内。现在需要的是，当模型数据改变指令需要更新PageDown键的视图来显示新的问题和答案。当用户改变下页的编辑区域中的指令需要能够以更新模型。当用户点击[保存]模型数据需要被保存到数据库中（或至少与另一个对象以确认它的工作）。

该指令需要能够响应模型中的更改，并保存它的原始数据，以KEYUP或当变化按钮在窗格编辑pssed $ P $模型。这里是我到目前为止所。需要注意的是这个版本不具备$ wmdInput.on（'改变'，但它是需要什么开始。

最重要的是，我想有版本的 1.2.7 该工作角和jQuery的 2.0.3 请注意，我发现与我的非工作$差异1.2.2和1.2.7版本之间的C $℃。我认为这是最好的，如果任何解决方案适用于最新版本（1.2.7）发布。

更新

  

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

解决方案

这里是一个工作链接：

http://cssdeck.com/labs/qebukp9k

更新

• 我做了一些优化。


• 我用ngModel。$格式化！无需另外$腕表。


• 我用$超时，然后范围。$申请，以避免$正在进行错误消化。

Angular.js＆安培;性能

• 如果你打的表现也许你的应用程序使用了太多$手表/ $上。


• 在我的经验，使用第三方库可以使所有类型的非效率/内存泄露的行为，主要是因为它没有考虑到与角/ SPA实现。


• 我能够做一些智能集成一些图书馆，但有些只是不适合很好地角的世界。


• 如果您的应用程序的必须显示1000+问题，你应该与编写自定义的中继器开始，preFER动态DOM插入。


• Angular.js不会万吨数据绑定的，除非你愿意写一些聪明的较低层次的东西（当你知道它是如何真正乐趣！）表现良好。


• 同样，preFER分页！由于MISKO Hevery说：的你真的不能表现出比约2000条信息给人类更多的是在单页上什么比这更是非常糟糕的用户界面，而人类无法处理此无妨。<。 / EM>


• 阅读：<一href=\"http://stackoverflow.com/questions/9682092/databinding-in-angularjs/9693933#9693933\">Databinding在angularjs


• 我很乐意帮助你更多，但首先让我告诉了code（联系我）..

解决方案：

VAR应用= angular.module（'应用'，[]）;app.directive（'pagedownAdmin'，函数（$编译，$超时）{
    变种nextId = 0;
    变种变换器= Markdown.getSanitizingConverter（）;
    converter.hooks.chain（preBlockGamut功能（文字，RBG）{
        返回text.replace（/ ^ {0,3}* \\ N（（？：？* \\ N）+）{0,3}* $ /克，功能（全，内） {
            返回＆LT;＆BLOCKQUOTE GT; + RBG（内）+＆LT; / BLOCKQUOTE＆GT; \\ N的;
        }）;
    }）;    返回{
        要求：'ngModel'，
        更换：真实，
        模板：'＆LT; D​​IV CLASS =PageDown键，引导编辑器＆GT;＆LT; / DIV＆GT;，
        链接：功能（范围，iElement，ATTRS，ngModel）{            VAR editorUniqueId;            如果（attrs.id == NULL）{
                editorUniqueId = nextId ++;
            }其他{
                editorUniqueId = attrs.id;
            }            VAR为newElement = $编译（
                '＆LT; D​​IV＆GT;' +
                   '＆LT; D​​IV CLASS =大规模杀伤性武器面板＆GT;' +
                      '＆LT; D​​IV ID =大规模杀伤性武器键式酒吧，'+ editorUniqueId +'＆GT;＆LT; / DIV＆GT;' +
                      '＆LT; TextArea类=大规模杀伤性武器输入ID =大规模杀伤性武器输入 - '+ editorUniqueId +'＆GT;' +
                      '＆LT; / textarea的＆GT;' +
                   '＆LT; / DIV＆GT;' +
                   '＆LT; D​​IV ID =wmd- ​​preview-'+ editorUniqueId +'级=pagedown- preVIEW大规模杀伤性武器面板wmd- ​​preVIEW＆GT;＆LT; / DIV＆GT;' +
                '＆LT; / DIV＆GT;'）（范围）;            iElement.html（为newElement）;            VAR帮助=功能（）{
                警报（没有帮助）;
            }            变种编辑=新Markdown.Editor（转换器， - + editorUniqueId，{
                处理程序：帮助
            }）;            变量$ wmdInput = iElement.find（'＃大规模杀伤性武器 - 输入 - '+ editorUniqueId）;            VAR的init = FALSE;            editor.hooks.chain（关于previewRefresh功能（）{
              变种VAL = $ wmdInput.val（）;
              如果（INIT＆安培;＆安培;！VAL == ngModel $ modelValue）{
                $超时（函数（）{
                  范围。$应用（函数（）{
                    ngModel $ setViewValue（VAL）。
                    。ngModel $渲染（）;
                  }）;
                }）;
              }
            }）;            ngModel。$ formatters.push（函数（值）{
              INIT = TRUE;
              $ wmdInput.val（值）;
              editor.refresh preVIEW（）;
              返回值;
            }）;            editor.run（）;
        }
    }
}）;


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 working. This is the exact same editor used by stackoverflow. Stackoverflow make this code available here:

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

There are some versions out there on the internet but none work well. What I need is one that will appear with all the editor buttons just like stackoverflow both when coded inline and also when it's inline as part of an ngRepeat.

I would like to make this directive work when it's coded inline and also inside an ng-repeat using Angular version 1.2.7. What's needed is that when the model data changes the directive needs to update the pagedown views to show the new question and answers. When the user changes the pagedown edit area the directive needs to be able to update the model. When the user clicks [save] the model data needs to be saved to the database (or at least to another object to confirm it worked).

The directive needs to be able to respond to changes in the model and also save it's raw data to the model on keyup or when the 'change' button is pressed in the editing paned. Here is what I have so far. Note that this version does not have the $wmdInput.on('change' but it's a start for what is needed.

Most important I would like to have this working with version 1.2.7 of Angular and jQuery 2.0.3 Please note that I found differences with my non-working code between versions 1.2.2 and 1.2.7. I think it's best if any solution works for the latest (1.2.7) release.

Update

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

解决方案

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: Databinding 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 "<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();
        }
    }
});

这篇关于谷歌PageDown键AngularJS指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！