AngularJS: accesso a formController di un modulo inserito all'interno della direttiva transclused dal controllore principale

Ho creato una semplice direttiva "finestra di dialogo modale", che utilizza la funzione di esclusione. Vorrei inserire un form() all'interno della direttiva "modal dialog". Mi aspetterei che formController di un modulo inserito all'interno della direttiva, sarà accessibile nello scope del controller genitore, tuttavia non lo è. Date un'occhiata al seguente violino, per favore: http://jsfiddle.net/milmly/f2WMT/1/AngularJS: accesso a formController di un modulo inserito all'interno della direttiva transclused dal controllore principale

completo del codice:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>AngJS test</title> 
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/foundation/4.0.9/css/foundation.min.css"> 
     <style> 
      .reveal-modal { 
       display: block; 
       visibility: visible; 
      } 
     </style> 
     <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script> 
     <script type="text/javascript"> 
      var app = angular.module('app', []); 
      app.controller('appCtrl', function ($scope) { 
       $scope.model = { 
        id: 1, name: 'John' 
       }; 
       $scope.modal = { 
        show: false 
       }; 
      }); 
      app.directive('modal', function() { 
       return { 
        scope: { 
         show: '=' 
        }, 
        transclude: true, 
        replace: true, 
        template: '<div class="reveal-modal small" ng-show="show"><div class="panel" ng-transclude></div></div>' 
       } 
      }); 
     </script> 
    </head> 
    <body ng-app="app"> 
     <div ng-controller="appCtrl"> 
      <div class="panel"> 
       Id: {{ model.id }}<br> 
       Name: {{ model.name }}<br> 
       Controller formController: {{ form }}<br> 
       Directive formController: {{ myForm }}<br> 
      </div> 

      <form name="form" class="panel"> 
       <input type="text" ng-model="model.name"> 
      </form> 

      <a ng-click="modal.show=!modal.show">toggle dialog</a> 

      <div modal show="modal.show"> 
       <form name="myForm"> 
        <input type="text" ng-model="model.name"> 
       </form> 
      </div> 

     </div> 
    </body> 
</html>

Quindi la mia domanda è come accedere o è possibile accedere formController della direttiva dal regolatore genitore?

Grazie per le risposte.

-Milano

fonte

2013-04-10 MilMly

È il violino giusto? Nessun riferimento a '$ scope.myForm' ovunque. – Langdon

C'è un {{myForm}} in HTML, che è lo stesso di $ scope.myForm, credo. – MilMly

C'è anche {{form}}, che fa riferimento a un modulo all'interno del controller ma al di fuori della direttiva. Questo funziona come previsto, ma myForm non raggiunge l'ambito genitore - l'ambito di appCtrl :-( – MilMly

Poiché si utilizza transclude, la direttiva creerà un bambino transclusa ambito. Non v'è alcun percorso facile dal campo di applicazione di controllo (003) per la portata transclusa della direttiva (005):

enter image description here

(il percorso dura/non raccomandato è quello di andare via la proprietà privata $$childHead sul nell'ambito del controllore, trovare l'ambito isolato, quindi utilizzare $$nextSibling per raggiungere l'ambito transclusa)

Aggiornamento:. da intuizioni da this answer, penso che possiamo ottenere il formController all'interno del Diretti ve, quindi utilizzare = per ottenerlo al genitore.

scope: { show: '=', formCtrl: '=' }, 
... 
link: function(scope, element) { 
    var input1 = element.find('input').eq(0); 
    scope.formCtrl = input1.controller('form'); 
}

HTML:

<div modal show="modal.show" form-ctrl="formCtrl">

Fiddle

enter image description here

fonte

2013-04-11 01:20:18

Che cosa ha generato quelle belle grafiche? – Langdon

Perfetto! :) Grazie, Marco.Ho biforcato il tuo violino per renderlo più generale, quindi cerca l'elemento del modulo al posto del primo input: http://jsfiddle.net/milmly/utnd6/ – MilMly

@Langdon, ho uno strumento che ho scritto/sto scrivendo. Uso il punto di GraphViz per generare le immagini. Ho una direttiva che illustra le proprietà dell'oscilloscopio e alcuni codici Python per generare i file punto. –

Ecco la mia soluzione: creo tale metodo nel controller di genitore:

Poi mi chiamano nei contenuti transclusa:

<my-directive> 
    <form name="myForm"> 
    <div ng-init="saveForm(myForm)"></div> 
    </form> 
</my-directive>

Dopo aver creato un'istanza direttiva ho forma istanza di controllo in ambito padre.

fonte

2014-09-01 15:05:59

Mi piace questa tecnica, pensi che questo sia il modo angolare? Sto solo chiedendo ... – Davincho

No davvero. Angular suppone che i controller gestiscano solo il modello di dati. Ma comunque è il miglior trucco che ho trovato. –

Workarround divertente – Gabriel

AngularJS: accesso a formController di un modulo inserito all'interno della direttiva transclused dal controllore principale

risposta

Problemi correlati