render partial view in umbraco with angularjs

Question

I'm trying to render a dialog with a form of formulate inside my controller.

I created a simple partial view:

@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>

Then in my page I added a simple function that shows the dialog with this template:

<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>

finally, in my page html, I a call this function with ng-click:

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

When I click on this button the screen goes dark like there is a shadow (this is how angular - material shows a dialog), there are no error but nothing is being rendered and I don't see the dialog at all.

Pig and Cat Pig and Cat · Accepted Answer · 2017-08-05T15:28:59

Try this please, it is working example.

Add this code to html file.

  <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>

script

$mdDialog.show({
  template: $('#dialog-template').html(),
  clickOutsideToClose: true,
});

render partial view in umbraco with angularjs

1 Answers