AngularJS: Acceso formController de un formulario colocado en el interior de transcluded directiva de padres de controlador

He creado un simple «diálogo modal» de la directiva, que utiliza transclude. Me gustaría colocar un formulario () dentro del «cuadro de diálogo modal» de la directiva. Yo esperaría que formController de una forma colocado dentro de la directiva, va a ser accesible en el controlador principal del alcance, sin embargo no lo es. Echa un vistazo a los siguientes violín, por favor: http://jsfiddle.net/milmly/f2WMT/1/

Código completo:

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

Así que mi pregunta es cómo acceder o es posible acceder a la directiva del formController de controlador principal?

Gracias por las respuestas.

-Milán

  • Es que el derecho de violín? No hay referencia a la $scope.myForm en cualquier lugar.
  • Hay un {{ myForm }} en HTML, que es igual a $scope.myForm, supongo.
  • También hay {{ forma }}, el cual hace referencia a un formulario en el interior de la controladora, pero fuera de la directiva. Éste funciona como se esperaba, pero myForm no llegar a los padres de alcance appCtrl del ámbito de aplicación 🙁
  • Realmente pienso que enlaza el mal violín. No hay myForm, no hay appCtrl, y no hay formController en que el violín.
  • Sí, tienes razón, se me olvidó actualizar el violín, gracias por el aviso. He actualizado el post con el código fuente completo, así como para corregir el violín enlace. Gracias de nuevo 🙂
InformationsquelleAutor MilMly | 2013-04-10

2 Kommentare

  1. 28

    Porque está utilizando transclude, la directiva creará un hijo transcluded alcance. No hay ningún camino fácil desde el controlador de alcance (003) a la directiva del transcluded alcance (005):

    AngularJS: Acceso formController de un formulario colocado en el interior de transcluded directiva de padres de controlador

    (Duro/no se recomienda la ruta de acceso es a través de la propiedad privada $$childHead en el controlador de alcance, encontrar el aislar alcance, a continuación, utilizar $$nextSibling para llegar a la transcluded alcance.)


    Actualización:
    De conocimientos a partir de esta respuesta, pienso que podemos llegar a la formController dentro de la directiva, a continuación, utilizar = para llegar a los padres.

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

    El violín

    AngularJS: Acceso formController de un formulario colocado en el interior de transcluded directiva de padres de controlador

    • Lo que genera los gráficos hermosos?
    • Perfecto! 🙂 Gracias Mark. Yo bifurcada su violín para hacerlo más general, por lo que se ve para el elemento de formulario en lugar de la primera entrada: jsfiddle.net/milmly/utnd6
    • Tengo una herramienta que me escribió, estoy escribiendo. Yo uso GraphViz del dot para generar las imágenes. Tengo una directiva que se encarga de determinar el alcance de las propiedades, y algunas código en Python para generar el punto archivos.
    • Me encantaría ver esta herramienta cuando el acabado, o al menos una muestra .dot archivo donde se podía copiar los estilos de! 🙂
    • he aquí un de la muestra .punto archivo. Si desea agregar una etiqueta, consulte stackoverflow.com/a/15707752/215945
    • la herramienta está terminado y en github: Peri$scope.

  2. 10

    Aquí está mi solución:
    Hago tal método en el controlador principal :

    $scope.saveForm = function(form) {
      $scope.myForm = form;
    };

    Luego me llaman en transcluded contenido:

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

    Después de la creación de la directiva ejemplo tengo el formulario de instancia de controlador en el ámbito primario.

    • Me gusta esta técnica, ¿crees que este es el Angular manera? Solo preguntaba …
    • No, en serio, en realidad. Angular supone controladores para lidiar con un sólo modelo de datos. Pero de todos modos es el mejor hack que he encontrado.
    • Este método funciona bien cuando no se puede editar la directiva, como cuando se utiliza Angular de la interfaz de usuario de Bootstrap directivas. A ver mi problema aquí, que fue resuelto con el método: stackoverflow.com/questions/37727443/…

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea