AngularJS – Creare una direttiva che aggiunge un elemento di pari livello

Sto creando un my-validate direttiva che sembra qualcosa di simile a questo

<input my-validate="customValidation" ng-model="model" />

Quello che voglio fare è allegare un sybling elemento della direttiva come questo

Errore di modello:

<ul class"errors">
   <li ng-repeat="for error in errors">{{error}} not valid</li>
</ul> 

errors è definito nel campo di applicazione della direttiva.

Ho aggiunto il template di errore nel compile funzione, ma il problema che ho è che il scope in funzione di collegamento non è lo stesso come il modello allegato.

Qui è un plunker per illustrare il problema: http://plnkr.co/edit/ghdtdYruQaaO0Yxxlrt1?p=preview

‘mondo’ è visto nella direttiva modello, ma non l’elemento aggiunto :S.

Il plunker link non è legato alla questione. Presumo che tu abbia sovrascritto? Si prega di risolvere questo.

OriginaleL’autore martinpaulucci | 2013-06-05

2 Replies
  1. 5

    Questo perché il div “2 ciao” è al di fuori del contenitore in cui il campo di applicazione è visibile.
    è possibile utilizzare element.append() invece di element.after() per avere la portata disponibile.

    Direttiva

    var app = angular.module('plunker', []);
    
    
    app.directive('myValidate', function($compile) {
          return {
            template: '<span>1. Hello {{world}}  my scope is {{$id}} (parent: {{$parent.$id}})<span/>',
            replace: true,
            restrict: 'A',
            scope: true,
            compile: function (element) {
    
              element.append('<div>2. Hello {{ world }}, my scope is {{$id}} (parent: {{$parent.$id}})</div>');
    
              return function(scope) {
                scope.world = 'World';
                //$compile()(scope);
              };
            }
          };
    });

    HTML

    <!DOCTYPE html>
    <html ng-app="plunker">
    
      <head>
        <meta charset="utf-8" />
        <title>AngularJS Plunker</title>
        <script data-require="[email protected]" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
        <link rel="stylesheet" href="style.css" />
        <script src="app.js"></script>
      </head>
    
      <body>
        <input my-validate="" />
      </body>
    
    </html>

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

    Grazie, il problema è che ho bisogno di essere un fratello, non un elemento figlio.
    Ho aggiornato l’esempio: plnkr.co/modifica/ghdtdYruQaaO0Yxxlrt1?p=anteprima
    Ti consiglio di avvolgere con div ( un po’'<div class='validatedInput'> <input ng-model="world" /> </div>' ) e utilizzare element.append
    plnkr.co/modifica/s3ItntEAml6iVrRJtF42?p=anteprima
    Te il problema ora è che l’originale attributi saranno div e non in ingresso: plnkr.co/modifica/23iwRQsdB6MxMU16NlHP?p=anteprima

    OriginaleL’autore Eduard Gamonal

  2. -1

    Penso che sei sulla strada giusta utilizzando il modulo di errori per alternare la visualizzazione. Questo è esattamente come è raccomandato in standard Angolare documentazione.

    Se desideri mostrare gli errori multipli per un singolo input, tuttavia, e possibile anche controllare i messaggi di errore da lì, mi raccomando, che utilizza un servizio, come attuato in http://plnkr.co/edit/iNcNs2ErrOnYf9I7whdu?p=preview.

    Ora si può avere un messaggio al token, ma come molti gettoni come si desidera per ingresso. Se si desidera più messaggi al token, basta usare un array di messaggi invece di un singolo valore di stringa (nota, annulla, diventa più complicato con quel metodo).

    Speranza che aiuta,
    Alex

    Questo non risolve la questione.

    OriginaleL’autore mrvdot

Lascia un commento