AngularJS:访问来自父控制器的transcluded指令内的表单的formController
Mil*_*Mly 20 angularjs angularjs-directive angularjs-scope
我创建了一个简单的"模态对话框"指令,它使用了transclude.我想在"模态对话框"指令中放置一个form().我希望在指令中放置一个表单的formController,可以在父控制器的范围内访问,但事实并非如此.请看下面的小提琴,请:http://jsfiddle.net/milmly/f2WMT/1/
完整代码:
<!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>
所以我的问题是如何访问或是否可以从父控制器访问指令的formController？
谢谢你的回答.
-米兰
Mar*_*cok 28
因为您正在使用transclude,所以该指令将创建一个子代码转换范围.从控制器范围(003)到指令的转换范围(005)没有简单的路径:
(硬/不推荐的路径是通过$$childHead控制器作用域上的私有属性,找到隔离范围,然后用于$$nextSibling到达被转换的范围.)
更新:
从这个答案的见解,我认为我们可以在指令中获取formController,然后用=它来获取它.
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">
- @Langdon,我有一个我写/写的工具.我使用GraphViz的点来生成图片.我有一个指示范围属性的指令,以及一些用于生成点文件的Python代码. (7认同)
- 什么产生了那些美丽的图形 (5认同)
- @apaidnerd,这是[示例.dot文件](https://github.com/mrajcok/angularjs-prototypal-inheritance-diagrams/blob/master/sample_from_new_tool.dot).如果要添加标签,请参阅http://stackoverflow.com/a/15707752/215945 (3认同)
- @apaidnerd,该工具已完成并在github上:[Peri $ scope](https://github.com/mrajcok/angularjs-periscope). (2认同)
Eug*_*nko 10
这是我的解决方案:我在父控制器中创建这样的方法:
$scope.saveForm = function(form) {
$scope.myForm = form;
};
然后我在抄曲的内容中称呼它:
<my-directive>
<form name="myForm">
<div ng-init="saveForm(myForm)"></div>
</form>
</my-directive>
创建指令实例后,我在父作用域中有表单控制器实例.
| 归档时间： |
|
| 查看次数： |
16066 次 |
| 最近记录： |