AngularJS:从父 Controller 访问放置在嵌入指令内的表单的 formController

标签 angularjs angularjs-directive angularjs-scope

我创建了一个简单的“模态对话框”指令,它使用了嵌入。我想在“模式对话框”指令中放置一个 form () 。我希望放置在指令内的表单的 formController 将在父 Controller 的范围内可访问,但事实并非如此。请看一下下面的 fiddle :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>

所以我的问题是如何访问或者是否可以从父 Controller 访问指令的 formController?

感谢您的解答。

-米兰

最佳答案

因为您正在使用嵌入,该指令将创建一个子嵌入范围。从 Controller 作用域 (003) 到指令的嵌入作用域 (005) 没有简单的路径:

enter image description here

(困难/不推荐的路径是通过 Controller 作用域上的私有(private)属性 $$childHead ,找到隔离作用域,然后使用 $$nextSibling 获取到嵌入的范围。)

<小时/>

更新: 来自this answer的见解,我认为我们可以在指令中获取 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">

Fiddle

enter image description here

关于AngularJS:从父 Controller 访问放置在嵌入指令内的表单的 formController,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15935224/

相关文章:

javascript - 图像大小调整在 Chrome 中有效,但在 Firefox 中无效

javascript - 改进 AngularJS 指令代码

javascript - 来自指令的 Angular 广播

AngularJS CamelCase 与 bind 和 $apply 解释

javascript - 如何根据条件 append 指令

javascript - angular.js - 用西类牙语包装货币符号和小数

javascript - 使用 Angular 在 JavaScript 中导出变量?

javascript - 为什么使用 &lt;input type ="file"/> 时 Angular 绑定(bind)失败?

javascript - Angular JS在作用域函数中渲染变量以查看和比较

javascript - 当作为参数传递给函数时,Angular $scope 属性会被覆盖