Angular JS Material Design：一个 mdDialog，多个模板答案

【问题标题】：Angular JS Material Design: one mdDialog, multiple templatesAngular JS Material Design：一个 mdDialog，多个模板
【发布时间】：2015-08-12 21:43:19
【问题描述】：

我正在尝试构建一个动态对话框，根据用户点击的内容显示不同的内容。这意味着擦除/隐藏对话框上显示的所有内容并显示新内容。我可以在一个模板中编写所有 html 并隐藏/显示它，但是......有没有办法在该对话框模板中呈现不同的模板？这样我就可以为对话框中显示的内容提供不同的模板，并且只需使用某种路由器来在同一个对话框中呈现这些模板。这可能吗？

<md-dialog>
   <md-dialog-content ng-controller="someCtrl">
       <a href="/screen1">Go to screen 1! </a>
       <a href="/screen2">Go to screen 2!</a>

       <ng-view/>
       <!-- Show here the chosen template -->

   </md-dialog-content>
</md-dialog>

【问题讨论】：

标签： javascript angularjs templates material-design angular-material

【解决方案1】：

您需要包含 ngRoute 模块，以及链接到它的脚本标记。

你会有一个这样的 div。

<div ng-view=""></div>

您将有一个类似这样的 partialRoutes.js 文件。

myApp.config(function($routeProvider){
  $routeProvider
    .when('/',{
        templateUrl: './partials/things.html'
    })
    .when('/stuff',{
        templateUrl: './partials/stuff.html'
    })
    .when('/otherstuff',{
        templateUrl: './partials/otherstuff.html'
    })
    .otherwise({
        redirectTo: '/',
    })
});

当你包含 ngRoute 时，它看起来像这样。

var myApp = angular.module('myApp', ['ngRoute']);

这里是 ngRoute 的文档。希望我能帮上忙。

https://docs.angularjs.org/api/ngRoute

【讨论】：

谢谢！最后决定采用不同的方法，使用 ng-switch 切换 div 进出视图，但无论如何感谢！

【解决方案2】：

是的，这是可能的。我以为我必须使用 locals 选项，但是没有它我就让它工作，因为我正在处理一个字符串而不是一个 javascript 对象。

我需要向我们的应用程序添加第二个对话框，我使用 if/else 块来传递 url 字符串。

代码如下：

$scope.displayDialog = function (ev) {
            var target = ev.target || ev.srcElement; //Second OR condition for IE.
            var id = target.id

            if(id === 'dialogId'){
                templateUrlValue = 'templateA.html';
            }else{
                templateUrlValue = 'templateB.html';
            }

            $scope.dialog = true;
            $mdDialog.show({
                controller: 'dialogCtrl',
                templateUrl: templateUrlValue,
                targetEvent: ev,
                clickOutsideToClose: true
            }).then(function (answer) {
                }, function () {
                });
        };

这允许我选择通过它的 id 打开哪个对话框。

【讨论】：