AngularJS: Formularz dostępowy Formularz kontrolny formularza umieszczonego wewnątrz dyrektywy translatującej z nadrzędnego kontrolera

Stworzyłem prostą dyrektywę "dialog modalny", która korzysta z transclude. Chciałbym umieścić formularz() wewnątrz dyrektywy "dialog modalny". Spodziewam się, że formController formularza umieszczonego w dyrektywie będzie dostępny w zakresie kontrolera nadrzędnego, jednak tak nie jest. Spójrz na poniższej skrzypce, proszę: http://jsfiddle.net/milmly/f2WMT/1/AngularJS: Formularz dostępowy Formularz kontrolny formularza umieszczonego wewnątrz dyrektywy translatującej z nadrzędnego kontrolera

Kompletna kod:

<!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>

Więc moje pytanie brzmi, jak uzyskać dostęp, czy jest to możliwe, aby uzyskać dostęp do dyrektywy w formController z kontrolera nadrzędnego?

Dziękuję za odpowiedzi.

-Milan

Źródło

2013-04-10 MilMly

Czy to prawda skrzypce? Brak odwołania do '$ scope.myForm' w dowolnym miejscu. – Langdon

Istnieje {{myForm}} w HTML, który jest taki sam jak $ scope.myForm, jak sądzę. – MilMly

Istnieje również {{form}}, który odwołuje się do formularza wewnątrz kontrolera, ale poza dyrektywą. Ten działa zgodnie z oczekiwaniami, ale mojaForma nie dociera do obszaru nadrzędnego - zakres appCtrl :-( – MilMly

Ponieważ używasz transclude dyrektywa stworzy dziecko dołączany zakresu. Nie ma łatwej ścieżki z zakresu regulatora (003) do zakresu dołączany tej dyrektywy (005):

enter image description here

(Twarda/nie zaleca ścieżka jest, aby przejść przez własności prywatnej $$childHead zakresu regulatora, znaleźć zakres izolat, a następnie użyć $$nextSibling aby dostać się do dołączany zakresu)

Aktualizacja:. od spostrzeżeń z this answer, myślę, że możemy uzyskać formController wewnątrz directi ve, a następnie użyj =, aby uzyskać go do rodzica.

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

Źródło

2013-04-11 01:20:18

Co wygenerowało te piękne grafiki? – Langdon

Idealny! :) Dziękuję Mark.Rozwinąłem twoje skrzypce, aby było bardziej ogólne, więc szuka elementu formularza zamiast pierwszego: http://jsfiddle.net/milmly/utnd6/ – MilMly

@Langdon, mam narzędzie, które napisałem/piszę. Używam kropki GraphViz do generowania zdjęć. Mam dyrektywę, która określa właściwości zakresu i trochę kodu Pythona do generowania plików dot. –

Oto moje rozwiązanie: tworzę taką metodę w kontroler nadrzędny:

Potem nazwać w dołączany treści:

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

Po utworzeniu instancji dyrektywa mam formularz instancji kontrolera w zakresie dominującej.

Źródło

2014-09-01 15:05:59

Podoba mi się ta technika, czy sądzisz, że jest to metoda kątowa? Po prostu pytam ... – Davincho

Naprawdę nie. Angular ma kontrolerów, którzy mają do czynienia tylko z modelem danych. Ale w każdym razie jest to najlepszy hack, jaki znalazłem. –

Zabawne podejście – Gabriel

AngularJS: Formularz dostępowy Formularz kontrolny formularza umieszczonego wewnątrz dyrektywy translatującej z nadrzędnego kontrolera

Odpowiedz

Powiązane problemy