Question

我想动态更改对话框的内容。我有几个HTML页面，我希望通过更改 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>

所以我试着做如下：

的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

我尝试在$scope.data中添加我的网页路径，但我知道这将无法正常工作。那么，有没有办法将外部内容的路径添加到AngularJS对话框中？

Answer 1

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

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

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

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

1 个答案: