web-dev-qa-db-ja.com

AngularJS：親コントローラーからトランスクルージョンされたディレクティブ内に配置されたフォームの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にアクセスする方法またはアクセスすることは可能ですか？

回答ありがとうございます。

-ミラノ

angularjsangularjs-directiveangularjs-scope
20
MilMly

トランスクルージョンを使用しているため、ディレクティブは子のトランスクルージョンスコープを作成します。コントローラスコープ（003）からディレクティブのトランスクルージョンスコープ（005）への簡単なパスはありません。

enter image description here

（難しい/推奨されないパスは、コントローラースコープのプライベートプロパティ$$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">

フィドル

enter image description here

28
Mark Rajcok

これが私の解決策です：私は親コントローラーでそのようなメソッドを作成します：

$scope.saveForm = function(form) {
  $scope.myForm = form;
};

それから私はそれをトランスクルージョンされたコンテンツで呼びます：

<my-directive>
  <form name="myForm">
     <div ng-init="saveForm(myForm)"></div>
  </form>
</my-directive>

ディレクティブインスタンスを作成した後、親スコープにフォームコントローラーインスタンスがあります。

10
Eugene Gluhotorenko