Fatal编程技术网
  • angularjs/
  • AngularJS：访问位于父控制器的转置指令内的表单的formController

AngularJS：访问位于父控制器的转置指令内的表单的formController

angularjs

AngularJS：访问位于父控制器的转置指令内的表单的formController,angularjs,angularjs-directive,angularjs-scope,Angularjs,Angularjs Directive,Angularjs Scope,我创建了一个简单的“模态对话框”指令，它使用transclude。我想在“modal dialog”指令中放置一个表单（）。我希望放置在指令中的表单的formController可以在父控制器的作用域中访问，但它不是。请看一下下面的小提琴： 完整代码： <!DOCTYPE html> <html> <head> <title>AngJS test</title> <link rel="sty

我创建了一个简单的“模态对话框”指令，它使用transclude。我想在“modal dialog”指令中放置一个表单（）。我希望放置在指令中的表单的formController可以在父控制器的作用域中访问，但它不是。请看一下下面的小提琴：

完整代码：

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


AngJS试验
.显示模态{
显示：块；
能见度：可见；
}
var-app=angular.module（'app'，[]）；
app.controller（'appCtrl'，函数（$scope）{
$scope.model={
身份证号码：1，姓名：“约翰”
};
$scope.modal={
节目：假
};
});
应用指令（'模态'，函数（）{
返回{
范围：{
显示：'='
},
是的，
替换：正确，
模板：“”
}
});
Id:{{model.Id}}

名称：{{model.Name}}

控制器formController:{{form}}

指令formController:{{myForm}}

切换对话框
所以我的问题是如何从父控制器访问或是否可以从父控制器访问指令的formController

谢谢你的回答

-Milan

因为您正在使用transclude，该指令将创建一个子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:

以下是我的解决方案： 我在父控制器中创建这样的方法：

$scope.saveForm = function(form) {
  $scope.myForm = form;
};
然后我称之为转置内容：

<my-directive>
  <form name="myForm">
     <div ng-init="saveForm(myForm)"></div>
  </form>
</my-directive>
创建指令实例后，我在父作用域中有表单控制器实例。

这是正确的吗？任何地方都没有对
$scope.myForm
的引用。HTML中有一个{myForm}，我想它和$scope.myForm是一样的。还有一个{form}，它引用了控制器内部但在指令外部的表单。这一个按预期工作，但myForm无法访问父作用域-appCtrl的作用域：-（我真的认为你链接错了小提琴。没有
myForm
，没有
appCtrl
，也没有
formController
。是的，你是对的，我忘了更新小提琴，谢谢你的通知。我更新了帖子，有完整的源代码和正确的小提琴链接。再次感谢：-）是什么产生了这些美丽的图形？太好了！：）谢谢你，马克。我把你的小提琴分叉，使它更一般，所以它寻找表单元素，而不是第一个输入：@Langdon，我有一个我写/正在写的工具。我使用GraphViz的圆点生成图片。我有一个指令来计算作用域属性，还有一些Python代码来生成点文件。@apaidnerd，下面是一个例子。如果要添加标签，请参阅@apaidnerd，该工具已完成并位于github:。实际上没有。Angular假设控制器只处理数据模型。但无论如何，这是我发现的最好的破解方法。当你不能编辑指令时，这种方法非常有效，例如当使用Angular UI引导指令时。请参见我的问题，该问题已通过您的方法解决： 
<my-directive>
  <form name="myForm">
     <div ng-init="saveForm(myForm)"></div>
  </form>
</my-directive>