angularjsng-dialog

ngDialog doesn't show data in template

When I call ngDialog no information that is in the template is displayed. It arrives to the DOM, but it isn't displayed.

This is the function where it is called:

controller.showPlan = function (plan) {
    ngDialog.open({
        template: 'client/src/organizer/app/planner/plan.html',
        scope: $scope.this
    });
};

This is the template:

<script type="text/ng-template">
<div class="ngdialog-message">
    <h1>Template heading</h1>
    <p>Content goes here</p>
</div>

This is the place in the main template where it is called:

<label ng-if="Planner.hasPlan(plan)" ng-click="Planner.showPlan(plan)">{{plan.title}}</label>

Everything works except ngDialog.

Solution

  • Add an id to your text/ng-template that matches the url of the template. So this template will be written to $templateCache with the name client/src/organizer/app/planner/plan.html & when you request the template it will be read from there ($templateCache).

    HTML

    <script type="text/ng-template" id="client/src/organizer/app/planner/plan.html">
    <div class="ngdialog-message">
        <h1>Template heading</h1>
        <p>Content goes here</p>
    </div>
</script>