angularjs - formularios - ng-form example
AngularJS: acceda a formController de un formulario colocado dentro de la directiva transcluida desde el controlador principal (2)
Aquí está mi solución: creo este método en el controlador principal:
$scope.saveForm = function(form) {
$scope.myForm = form;
};
Luego lo llamo en contenido transcluido:
<my-directive>
<form name="myForm">
<div ng-init="saveForm(myForm)"></div>
</form>
</my-directive>
Después de crear una instancia de directiva, tengo una instancia de controlador de formulario en el ámbito principal.
He creado una simple directiva de "diálogo modal", que usa transclude. Me gustaría colocar un formulario () dentro de la directiva de "diálogo modal". Yo esperaría que el controlador de forma de un formulario colocado dentro de la directiva, sea accesible en el alcance del controlador principal, pero no lo es. Eche un vistazo al siguiente 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>
Entonces, mi pregunta es cómo acceder o ¿es posible acceder al formController de la directiva desde el controlador principal?
Gracias por las respuestas.
-Milán
Debido a que está utilizando Transclude, la directiva creará un ámbito secundario transcluido. No hay un camino fácil desde el alcance del controlador (003) al alcance transcluido de la directiva (005):
(La ruta difícil / no recomendada es ir a través de la propiedad privada $$childHead en el ámbito del controlador, encontrar el ámbito aislado y luego usar $$nextSibling para llegar al ámbito transcluido).
Actualización: a partir de los puntos de vista de esta respuesta , creo que podemos obtener formController dentro de la directiva y luego usar = para enviarlo 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">