AngularJS：如何在对话框中包含HTML页面？

Question

我想动态更改对话框的内容。 我想通过更改url进入HTML中的多个页面。

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

所以我尝试做如下：

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>'
              });
         }
    }
}());

柱塞

我试图在$scope.data添加页面的路径，但是我知道这永远行不通。 那么，有没有办法将外部内容的路径添加到AngularJS对话框？

Answer 1

您可以为此使用ng-Route或ui路由器：

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'
        });
});

Answer 2

如果要使用外部文件作为对话框的内容，则在显示对话框时应使用templateUrl而不是template 。 您可以在此处看到更多用于设置对话框的选项： https ://material.angularjs.org/0.9.6/#/api/material.components.dialog/service/ $ mdDialog

我分叉了您的plunkr并对其进行了更改，以从外部文件加载对话框内容。 看一下这个工作示例：

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