AngularJS：親コントローラからのトランスコードされたディレクティブ内に配置されたフォームのアクセスformController

私は、transcludeを使用する単純な「モーダルダイアログ」ディレクティブを作成しました。私は "モーダルダイアログ"の中にform（）を配置したいと思います。私は、ディレクティブ内に配置されたフォームのformControllerは親コントローラのスコープでアクセス可能になると予想しますが、そうではありません。、次のフィドルを見てみてくださいください：http://jsfiddle.net/milmly/f2WMT/1/AngularJS：親コントローラからのトランスコードされたディレクティブ内に配置されたフォームのアクセス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>

だから私の質問は、アクセスする方法であるか、それは親のコントローラからの指令のformControllerにアクセスすることは可能でしょうか？

ありがとうございました。

-Milan

出典

2013-04-10 MilMly

正しいフィドルですか？どこでも '$ scope.myForm'への参照はありません。 – Langdon

HTMLには{{myForm}}があり、これは$ scope.myFormと同じです。 – MilMly

{{form}}もありますが、これはコントローラー内ではあるがディレクティブの外にあるフォームを参照します。これは期待どおりに動作しますが、myFormは親スコープにはなりません - appCtrlのスコープ:-( – MilMly

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

enter image description here

（推奨されません/ハードパスが見つかり、コントローラのスコープに私有財産$$childHeadを経由して行くことですその後、分離株スコープ、トランスクルード範囲に到達するために$$nextSiblingを使用）

更新： this answerからの洞察から、私たちはdirecti内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

出典

2013-04-11 01:20:18

これらの美しいグラフィックは何が生成されましたか？ – Langdon

完璧！ :)マークありがとうございます。私はあなたのフィドルをより一般的にするためにフォークしたので、最初の入力の代わりにフォーム要素を探します：http://jsfiddle.net/milmly/utnd6/ – MilMly

@ Langdon、私は書いた/書いているツールを持っています。 GraphVizのドットを使って画像を生成します。私はスコープのプロパティを調べる指示文とドットファイルを生成するPythonコードを持っています。 –

ここでは私のソリューションです：私は親コントローラで、このようなメソッドを作成します。

は、それから私は、トランスクルードコンテンツでそれを呼び出す：

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

ディレクティブのインスタンスを作成した後、私は親スコープでフォームのコントローラのインスタンスを持っています。

出典

2014-09-01 15:05:59

私はこのテクニックが気に入っていますが、これは角度の方法だとお考えですか？ただ質問する... – Davincho

実際には実際にはありません。 Angularは、データモデルのみを扱うコントローラを想定しています。しかし、とにかくそれは私が見つけた最高のハックです。 –

Funny workarround – Gabriel

AngularJS：親コントローラからのトランスコードされたディレクティブ内に配置されたフォームのアクセスformController

答えて

関連する問題