Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了AngularJS:从form控制器访问formController放置在转录指令内大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我创建了一个简单的“模态对话”指令,它使用转录。我想在“模态对话”指令中放置一个表单()。我期望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?

谢谢你的答案。

-米兰

因为您正在使用转义,所以该指令将创建一个子代的范围。从控制器范围(003)到指令的转录范围(005)没有简单的路径:

(硬/不推荐的路径是通过私有属性$$ 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

大佬总结

以上是大佬教程为你收集整理的AngularJS:从form控制器访问formController放置在转录指令内全部内容,希望文章能够帮你解决AngularJS:从form控制器访问formController放置在转录指令内所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。