angularjs - together - property angular




Direttiva AngularJS di paging di Google (3)

Demo: http://plnkr.co/edit/FyywJS?p=preview

Sommario

  1. Ho rimosso la keyup e aggiunto un hook onPreviewRefresh per assicurarmi che il clic sulla barra degli strumenti aggiorni correttamente il ng-model .

  2. Le funzioni su $rootScope dimostreranno la possibilità di aggiornare ng-model dall'esterno della paginazione.

  3. salvare la funzionalità dipende esclusivamente dalla tua scelta, dal momento che ora puoi accedere a ng-model ovunque.

Vedere la parte inferiore della domanda per una soluzione migliore a questo problema

Ho cercato per un po 'di tempo per ottenere una direttiva per il funzionamento di paginazione. Questo è esattamente lo stesso editor utilizzato da StackOverflow. Stackoverflow rende questo codice disponibile qui:

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

Ci sono alcune versioni là fuori su internet ma nessuna funziona bene. Quello di cui ho bisogno è uno che apparirà con tutti i pulsanti dell'editor proprio come stackoverflow sia quando è codificato in linea sia quando è in linea come parte di un ngRepeat.

Vorrei far funzionare questa direttiva quando è codificata in linea e anche all'interno di una ng-repeat usando Angular versione 1.2.7. Quello che serve è che quando i dati del modello cambiano, la direttiva deve aggiornare le viste di paginazione per mostrare la nuova domanda e le risposte. Quando l'utente modifica l'area di modifica del pagingown, la direttiva deve essere in grado di aggiornare il modello. Quando l'utente fa clic su [salva] i dati del modello devono essere salvati nel database (o almeno in un altro oggetto per confermare che ha funzionato).

La direttiva deve essere in grado di rispondere ai cambiamenti nel modello e anche salvare i suoi dati grezzi sul modello in keyup o quando viene premuto il pulsante 'change' nel riquadro di modifica. Ecco cosa ho finora. Si noti che questa versione non ha $ wmdInput.on ('cambia' ma è un inizio per ciò che è necessario.

Più importante mi piacerebbe farlo funzionare con la versione 1.2.7 di Angular e jQuery 2.0.3 Si noti che ho trovato differenze con il mio codice non funzionante tra le versioni 1.2.2 e 1.2.7. Penso che sia meglio se qualsiasi soluzione funziona per l'ultima versione (1.2.7).

Aggiornare

Ora questa direttiva è più semplice e risolve alcuni problemi recenti che ho riscontrato con il contenuto non mostrato. Consiglio vivamente di utilizzare questa direttiva che si basa sulla risposta accettata più alcuni miglioramenti: https://github.com/kennyki/angular-pagedown


Potrebbe non essere la risposta, ma tutto il problema si verifica quando inizi a utilizzare Markdown.Editor che non offre molti vantaggi.

Ovviamente, è necessario utilizzarlo per i principianti degli editor markdown, ma quando usano il markdown, non sono già principianti (potrei sbagliarmi).

Quello che mi sono avvicinato a questo problema è stato quello di realizzare una versione completamente funzionante di questo senza usare l'editor.

Ha anche l'anteprima.

È anche molto semplice.

https://github.com/allenhwkim/wiki

---- modificare ----
rimosso
---- modificare ----
rimosso
---- modificare ----

Per fornire un editor completamente funzionante, dopo poche ore di prove e domande, quanto segue è il più semplice che riesco a ottenere. Ciò richiede qualsiasi $ watch o $ formatters. Racchiude semplicemente l'elemento dato con tutti gli attributi dati dalla textarea.

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

Ecco un link di lavoro:

http://cssdeck.com/labs/qebukp9k

AGGIORNARE

  • Ho fatto alcune ottimizzazioni.
  • Io uso ngModel. $ Formattatori! non c'è bisogno di un altro $ watch.
  • Uso $ timeout e quindi scope. $ Apply per evitare errori $ digest in progress.

Angular.js e prestazioni

  • Se colpisci le prestazioni, forse la tua applicazione sta usando troppi $ watch / $ on.
  • Nella mia esperienza, l'uso di librerie di terze parti può causare qualsiasi tipo di comportamento non efficiente / perdite di memoria, soprattutto perché non è stato implementato con angular / SPA in mente.
  • Sono stato in grado di fare alcune integrazioni intelligenti per alcune librerie, ma alcune semplicemente non si adattano bene al mondo di angular.
  • Se la tua applicazione deve mostrare più di 1000 domande dovresti probabilmente iniziare a scrivere il tuo ripetitore personalizzato e preferire inserimenti DOM dinamici.
  • Angular.js non funzionerà bene con tonnellate di associazioni di dati a meno che tu non sia disposto a scrivere cose intelligenti di livello inferiore (è davvero divertente quando sai come!).
  • Ancora una volta, preferisci l'impaginazione! Come dice Misko Hevery: "Non è possibile mostrare più di circa 2000 informazioni su un singolo essere umano su una singola pagina: qualsiasi cosa di più è un'interfaccia utente davvero brutta, e gli umani non possono comunque elaborarla".
  • Leggi questo: come funziona il binding dei dati in AngularJS?
  • Sono più che felice di aiutarti, ma prima lascia che mostri il codice (contattami) ..

Soluzione:

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