angularjs - escape - ng-class

Directiva de Google paginado AngularJS

Question

Vea el fondo de la pregunta para una solución mejorada a este problema

He estado intentando desde hace algún tiempo conseguir que funcione una directiva para la paginación. Este es exactamente el mismo editor utilizado por stackoverflow. Stackoverflow hace que este código esté disponible aquí:

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

Hay algunas versiones en internet pero ninguna funciona bien. Lo que necesito es uno que aparezca con todos los botones del editor como con Stackoverflow tanto cuando se codifique en línea como cuando esté en línea como parte de un ngRepeat.

Me gustaría hacer que esta directiva funcione cuando esté codificada en línea y también dentro de una repetición ng usando la versión Angular 1.2.7. Lo que se necesita es que cuando los datos del modelo cambien, la directiva debe actualizar las vistas de página para mostrar las nuevas preguntas y respuestas. Cuando el usuario cambia el área de edición paginada, la directiva debe poder actualizar el modelo. Cuando el usuario hace clic en [guardar], los datos del modelo deben guardarse en la base de datos (o al menos en otro objeto para confirmar que funcionó).

La directiva debe ser capaz de responder a los cambios en el modelo y también guardar sus datos sin procesar en el modelo en keyup o cuando se presiona el botón ''cambiar'' en el panel de edición. Esto es lo que tengo hasta ahora. Tenga en cuenta que esta versión no tiene el $ wmdInput.on (''cambiar'' pero es un comienzo para lo que se necesita.

Lo más importante es que me gustaría que esto funcione con la versión 1.2.7 de Angular y jQuery 2.0.3. Tenga en cuenta que encontré diferencias con mi código que no funciona entre las versiones 1.2.2 y 1.2.7. Creo que es mejor si alguna solución funciona para la última versión (1.2.7).

Actualizar

Ahora, esta directiva es más simple y resuelve algunos problemas recientes que tuve con el contenido que no se muestra. Recomiendo encarecidamente utilizar esta directiva que se basa en la respuesta aceptada más algunas mejoras: https://github.com/kennyki/angular-pagedown

Answer 1

Demostración: http://plnkr.co/edit/FyywJS?p=preview

Resumen

1. keyup y agregué un gancho en onPreviewRefresh para asegurar que hacer clic en la barra de herramientas actualice correctamente el ng-model .

2. Las funciones en $rootScope demostrarán la capacidad de actualizar ng-model desde fuera de la página.

3. La funcionalidad de guardar depende únicamente de su elección, ya que ahora puede acceder ng-model cualquier lugar.

Answer 2

Puede que no sea la respuesta, pero todo el problema se produce cuando comienza a utilizar Markdown.Editor, que no le brinda muchos beneficios.

Por supuesto, debe usarlo para principiantes en el editor de marcas, pero al usar markdown, ya no son principiantes de todos modos (podría estar equivocado).

Lo que me acerqué a este problema fue hacer una versión completamente funcional de este sin usar el editor.

Tiene vista previa también.

También es muy simple.

https://github.com/allenhwkim/wiki

---- editar ----
remoto
---- editar ----
remoto
---- editar ----

Para proporcionar un editor en pleno funcionamiento, después de algunas horas de prueba y de hacer preguntas, lo siguiente es lo más sencillo que puedo obtener. Esto requiere cualquier $ watch ni $ formatters. Simplemente envuelve el elemento dado con todos los atributos dados por el área de texto.

http://plnkr.co/edit/jeZ5EdLwOfwo6HzcTAOR?p=preview

app.directive(''pagedownEditor'', function($compile, $timeout) {
  var num=0;
  return {
    priority: 1001, //higher than ng-repeat, 1000
    link: function(scope, el, attrs) {
      var uniqNum = scope.$index || num++;
      var wmdPanel = document.createElement(''div'');
      wmdPanel.className = "wmd-panel";
      var wmdButtonBar = document.createElement(''div'');
      wmdButtonBar.id = ''wmd-button-bar-''+uniqNum;
      wmdPanel.appendChild(wmdButtonBar);
      el.wrap(wmdPanel); // el is ng-repeat comment, it takes tim

      var converter = Markdown.getSanitizingConverter();
      var editor = new Markdown.Editor(converter, "-"+uniqNum);
      $timeout(function() {
        wmdPanel.querySelector(''textarea'').id = ''wmd-input-''+uniqNum;
        wmdPanel.querySelector(''textarea'').className += '' wmd-input'';
        wmdPanel.insertAdjacentHTML(''afterend'', ''<div id="wmd-preview-''+uniqNum+''" ''
          +''class="pagedown-preview wmd-panel wmd-preview">'');
        editor.run()
      }, 50);
    }
  };

Answer 3

Puedes cambiar esto:

scope.$watch(attrs.ngModel, function () {
var val = scope.$eval(attrs.ngModel);

Para esto:

scope.$watch(attrs.ngModel, function(newValue, oldValue) {
  var val = newValue;
});

Además puede intentar comentar este código:

if (val !== undefined) {
    $wmdInput.val(val);
    ...    

}

Creo que puede estar asociado con el comportamiento extraño.

Answer 4

Aquí hay un enlace de trabajo:

http://cssdeck.com/labs/qebukp9k

ACTUALIZAR

• Hice algunas optimizaciones.
• Yo uso ngModel. $ Formatters! no hay necesidad de otro $ reloj.
• Utilizo $ timeout y luego alcance. $ Apply para evitar $ digerir errores en curso.

Angular.js y rendimiento

• Si alcanzas el rendimiento, tal vez tu aplicación esté usando demasiados $ watch / $ on.
• En mi experiencia, el uso de bibliotecas de terceros puede causar todo tipo de comportamiento no eficiente / pérdida de memoria, principalmente porque no se implementó teniendo en cuenta angular / SPA.
• Pude hacer una integración inteligente para algunas bibliotecas, pero algunas simplemente no encajan bien en el mundo de angular.
• Si su aplicación debe mostrar más de 1000 preguntas, probablemente debería comenzar por escribir su repetidor personalizado y preferir las inserciones de DOM dinámicas.
• Angular.js no funcionará bien con toneladas de enlaces de datos a menos que estés dispuesto a escribir algunas cosas inteligentes de nivel inferior (¡es realmente divertido cuando sabes cómo!).
• De nuevo, prefiero la paginación! Como dice Misko Hevery: "En realidad, no puede mostrar más de 2000 piezas de información a un humano en una sola página. Cualquier cosa más que eso es una IU realmente mala, y los humanos no pueden procesar esto de todos modos".
• Lea esto: ¿Cómo funciona el enlace de datos en AngularJS?
• Estoy más que feliz de ayudarlo, pero primero déjeme mostrar el código (contácteme) ..

Solución:

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