3

タイトルは少し口が悪いですが、私の現在の状況があります：

ルートにあるモーダル ポップアップのプレーン マークアップであるディレクティブ (D1) があります。コントローラーのスコープ (C1) 内にディレクティブ (D2) があります。D2 でモーダル D1 の内部にコンテンツを設定したいと考えています。最終的に D1 に注入したいネットワークからデータをプルする C1 に注入されるサービス (S1) があります。

D1 は次のようになります (モーダルのプレーン マークアップ): ここに画像の説明を入力

C1 の S1 が D2 にデータを返して D1 に入力した後、D1 は次のようになります。D2 は、{{title}} などの D1 のモデル データの定義を担当します。 ここに画像の説明を入力

アイデアは、別のディレクティブ (D2) を介して定義/入力できる、一般的な分離されたモーダル (D1) を持つことです。

この機能を実装するのに苦労しています。ボーナス ポイントとして、D1 に、チェックボックス、入力、テキストなどのさまざまな要素をモーダルに入力するために呼び出すことができる API を持たせたいと考えています。これは、D1 の外部でマークアップを作成し、それを D1 に完全に挿入することとは異なります。

コードの基本は次のとおりです。

myApp.controller('C1', function(S1){
   var results = S1.query();
   // populate D1 attributes with results from S1?  or a getter function in the controller to returns results to D1.
}

myApp.directive('D1', function() {
var createCheckBox = function( name ){ // one of many different element available exposed through D1's API.
    var checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.name = name;
    return checkbox;
}
return{
   restrict: "E",
   templateUrl: '/path/to/my/modal.html',
   controller: function( $scope ){ // hopefully this would be D1's API
       $scope.modalContent = [];
       this.addCheckBox = function( checkboxName ){
           $scope.push( this.createCheckBox( checkboxName ) );
       }
   }
   link: function( scope, element, attrs ){
        // set up events on the modal (such as closing it)
   }
}
} // end of D1

myApp.directive('D2', function() {
    return{
       restrict: "A",
       require: 'D1', // <-- do not think this is possible with my setup.
       link: function( scope, element, attrs ){
            element.bind( 'click', function(){
                // loop through data returned by service
                D1.addCheckBox(/* checkbox's name */ );
                // end loop
            });

       }
    } 
}// end of D2

HTML マークアップ

<div ng-controller="root">
  <div ng-controller="C1">
     <span D2></span>
  </div>
  <D1></D1>
</div>

ここまでフォローしていただきありがとうございます！

TL;DR: 役立つ別の質問を探してください

4

1 に答える 1

0

うわー長い質問！すべてを理解しているかどうかはわかりませんが、Jonnybojandles のコメントに従ってください...

あなた$broadcastとできます$onか？

$rootScope.$broadcast('MyEvent'); // Fire an event

$scope.$on('MyEvent', function () {  });  // Handle the event

または単に使用し$rootScopeますか？

于 2013-04-04T14:25:33.167 に答える