ng-include in mdDialog not working

Question

複数のテンプレートを格納するために単一のモーダルダイアログ関数を使用しようとしています。ダイアログボックスを作成するための呼び出しを送信し、その入力に基づいてさまざまなngインクルードファイルを呼び出そうとしています。しかし、ng-includeファイルは決して呼び出されないようです。

紛失しているものがありますか？

ダイアログを呼び出し

function showDialog(ev, thisItem, modalType) 
    { 
     $mdDialog.show({ 
      controller: 'DialogController', 
      controllerAs: 'vm', 
      templateUrl: 'app/main/apps/views/templates.html', 
      locals:{ 
       modalType : modalType 
       thisItem : thisItem 
      }, 
      parent: angular.element(document.body), 
      targetEvent: ev, 
      clickOutsideToClose:true, 
      fullscreen: true 
     }) 
     .then(function(data) { 
      vm.selectedRef=data; 
      // Call to server to update the references 
     }, function() { 

     }); 
    }; 

<md-dialog aria-label="" id="marginDialog" class="dialogItem" ng-cloak> 

<span ng-if="vm.modalType=='bibEdit'" 
     ng-include="app/main/apps/views/editReference.tmpl.html"> 

</span> 

<span ng-include="app/main/apps/templates/editMargins.tmpl.html"> 

</span> 

様々下のテンプレートを呼び出すべきであるテンプレート、私は変数がテンプレートに到達し、正しいことを確認することができ、彼らがしていることコントローラで正しい。ただし、インクルードファイルは単に呼び出されません。

Answer 1

ng-includesと角度成分を混合した結果が本当に混ざり合っていたので、今は一般的に避けようとしています。

私はこのケースで行うにしようと正しいテンプレートのURLを決定する関数を記述し、ダイアログconfigオブジェクトとしてということを渡すことである。ここでは

function showDialog(ev, thisItem, modalType) 
{ 
    var template; 
    var getTemplate = function(){ 
     switch(modalType){ 
     case 'one': 
      template = 'dialog1.html'; 
      break; 
     case 'two': 
      template = 'dialog2.html'; 
      break; 
     }  
    }(); 

    $mdDialog.show({ 
     controller: 'DialogController', 
     controllerAs: 'vm', 
     templateUrl: template, 
     locals:{ 
      modalType : modalType 
      thisItem : thisItem 
     }, 
     parent: angular.element(document.body), 
     targetEvent: ev, 
     clickOutsideToClose:true, 
     fullscreen: true 
    }) 
    .then(function(data) { 
     vm.selectedRef=data; 
     // Call to server to update the references 
    }, function() { 

    }); 
}; 

が働いcodepen

Answer 2

ですディレクティブを使用します。これはmdダイアログ内で動作します。

(function() { 

    // Add the directive to the module 
    angular.module("YourApp").directive('editMargins', EditMarginsFactory); 

    // Factory Method 
    function EditMarginsFactory() 
    { 
     // Construct and return the instance 
     return { 
      restrict: 'E', 
      scope: false, 
      templateUrl: "app/main/apps/templates/editMargins.tmpl.html" 
     }; 
    } 

})(); 

その後、代わりに使用するのでは、あなたの他のテンプレートにNGを-含まれ、ちょうどこの操作を行います。

<edit-margins></edit-margins> 

注意をスコープを使用すること：偽ディレクティブでは、それが親を使用するようになりscope、ディレクティブを追加したテンプレートによって使用されるスコープ