CODEWITHSUNDEEP
javascriptangularjs
Mustapha Aoussar
Mustapha Aoussar

Reputation: 5923

AngularJS: How to include an HTML page into a dialog?

I want to change dynamically the content of a dialog. I have several pages in HTML that I want to get in my dialog by changing the url.

<md-buttonng-click="showDialog($event,'myurl/page-1.html')">Show dialog-1</md-button>
<md-buttonng-click="showDialog($event,'myurl/page-2.html')">Show dialog-2</md-button>
<md-buttonng-click="showDialog($event,'myurl/page-3.html')">Show dialog-3</md-button>

so I tried to do as below:

JavaScript/AngularJS:

(function () {
    angular.module('myApp', ['ngMaterial']).controller('AppCtrl', AppCtrl);
    function AppCtrl($mdDialog, $scope) {
         $scope.data = {url: 'Hello World'}; // "myurl/page.html" <--- I want to add external page here
         $scope.hideDialog = $mdDialog.hide;
         $scope.showDialog = showDialog;

         function showDialog(evt) {
              $scope.data.dialogOpen = true;
              $mdDialog.show({
                   targetEvent: evt,
                   scope: $scope.$new(),
                   template:
                   '<md-dialog>' +
                   '<md-toolbar>' + 
                   '  <div class="md-toolbar-tools"><h2>Mango (Fruit)</h2></div>' + 
                   '</md-toolbar>' + 
                   '  <md-content>{{data.url}}</md-content>' +
                   '  <div class="md-actions">' +
                   '    <md-button ng-click="data.dialogOpen=false;hideDialog()">' +
                   '      Close' +
                   '    </md-button>' +
                   '  </div>' +
                   '</md-dialog>'
              });
         }
    }
}());

Plunker

I tried to add the path of my page in $scope.data, but I know that this will never work. So, is there a way to add path to external content to an AngularJS dialog?

Upvotes: 0

Views: 1384

Answers (2)

rdgfuentes
rdgfuentes

Reputation: 346

If you want to use an external file for the content of your dialog you should use templateUrl when showing the dialog instead of template. You can see more options to setup your dialog here: https://material.angularjs.org/0.9.6/#/api/material.components.dialog/service/$mdDialog

I forked your plunkr and made the changes to it to load the dialog content from external files. Take a look at this working example:

http://plnkr.co/edit/WHQko1l4p7xHQx0dz5wh?p=preview

Upvotes: 1

Ben Bieler
Ben Bieler

Reputation: 1588

You could use ng-Route or ui router for this:

App.config(function($routeProvider) {
    $routeProvider

        // route for the home page
        .when('/', {
            templateUrl : 'pages/home.html',
            controller  : 'mainController'
        })

        // route for the about page
        .when('/about', {
            templateUrl : 'pages/about.html',
            controller  : 'aboutController'
        })

        // route for the contact page
        .when('/contact', {
            templateUrl : 'pages/contact.html',
            controller  : 'contactController'
        });
});

Upvotes: 1

Related Questions