2017-08-05 1 views
0

私のコントローラの中にformulateという形式のダイアログをレンダリングしようとしています。anglejsを持つumbracoの部分図をレンダリングする

私は、単純な部分図作成:私は、私のページのHTMLに、最終的には

<script> 
    var app = angular.module('app', ['ngMaterial']) 
    .controller('JobCtrl', function($scope, $mdDialog){ 


     $scope.showDialog = function(ev){ 
      $mdDialog.show({ 
       templateUrl: <path-to-partial-view>, 
       parent: angular.element(document.body), 
       targetEvent: ev, 
       clickOutsideToClose:true 
      }); 
     }; 
    }); 
</script> 

:私はこのテンプレートを使用してダイアログを示し、単純な機能を追加しました私のページに続いて

@using formulate.app.Types 
@{ 
      // Get a view model for the picked form. 
    var pickedForm = Model.Content.GetPropertyValue<ConfiguredFormInfo>("formPicker"); 
    var vm = formulate.api.Rendering.GetFormViewModel(pickedForm.FormId, pickedForm.LayoutId, 
     pickedForm.TemplateId, 
     // Include this parameter in Formulate 0.3.7 or greater. 
     Model.Content); 

} 

<md-dialog> 
    <form ng-cloak> 
     <md-toolbar></md-toolbar> 
     <md-dialog-content><p>@Html.Partial("~/Views/Partials/Formulate/RenderForm.cshtml", vm)</p></md-dialog-content> 
     </form> 
</md-dialog> 

をこの機能をng-clickで呼び出す:

<md-button class="md-primary md-raised" ng-click="showDialog($event)">שלח קו"ח למשרה זאת</md-button> 

このボタンをクリックすると、画面が暗くなります影があります(これは、角材がダイアログを表示する方法です)、エラーはありませんが、レンダリングされているものは何もなく、ダイアログがまったく表示されません。

答えて

0

試してみてください。動作例です。

このコードをhtmlファイルに追加します。

<script type="application/ng-template" id="dialog-template"> 
    @using formulate.app.Types 
    @{ 
     var pickedForm = Model.Content.GetPropertyValue<ConfiguredFormInfo>("formPicker"); 
     var vm = formulate.api.Rendering.GetFormViewModel(pickedForm.FormId, pickedForm.LayoutId, pickedForm.TemplateId, Model.Content); 

    } 

    <md-dialog> 
     <form ng-cloak> 
      <md-toolbar></md-toolbar> 
      <md-dialog-content> 
       <p>@Html.Partial("~/Views/Partials/Formulate/RenderForm.cshtml", vm)</p></md-dialog-content> 
     </form> 
    </md-dialog> 
    </script> 

スクリプト

$mdDialog.show({ 
    template: $('#dialog-template').html(), 
    clickOutsideToClose: true, 
}); 
関連する問題