AngularJS：访问表单控制器的表单放在transcluded指令从里面父控制器 [英] AngularJS: Access formController of a form placed inside transcluded directive from parent controller
问题描述
我创建了一个简单的模态对话框指令，它使用transclude。我想放置表格（）中的模态对话框指令中。我希望放在里面的指令的一种形式的表单控制器，将是在父母控制的范围访问，但事实并非如此。看看下面的小提琴，请： http://jsfiddle.net/milmly/f2WMT/1/
I've created a simple "modal dialog" directive, which uses transclude. I would like to place a form () inside the "modal dialog" directive. I would expect that formController of a form placed inside the directive, is going to be accessible in parent controller's scope, however it isn't. Take a look at the following fiddle, please: http://jsfiddle.net/milmly/f2WMT/1/
完成code：
<!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>
所以我的问题是如何访问或者是它可以从父控制器访问指令的表单控制器？
So my question is how to access or is it possible to access directive's formController from parent controller?
感谢您的答案。
-Milan
推荐答案
由于您使用transclude，该指令将创建一个子transcluded范围。有一个从控制器范围内（003），该指令的transcluded范围不容易的路径（005）：
Because you are using transclude, the directive will create a child transcluded scope. There is no easy path from the controller scope (003) to the directive's transcluded scope (005):
（硬盘/不推荐路径是通过私人财产 $$ childHead 去控制器范围，找到分离范围，然后用 $$ nextSibling 去的transcluded范围。）
(The hard/not recommended path is to go via private property $$childHead on the controller scope, find the isolate scope, then use $$nextSibling to get to the transcluded scope.)
更新：
从这个答案的见解，我认为我们可以得到指令里面的表单控制器，然后用 = 来得到它的母公司。
Update:
From insights from this answer, I think we can get the formController inside the directive, then use = to get it to the parent.
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">
这篇关于AngularJS：访问表单控制器的表单放在transcluded指令从里面父控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
