Angular JS Material 设计：一个mdDialog，多个模板

Question

我正在尝试构建一个动态对话框，根据用户点击的内容显示不同的内容。这意味着 erasing/hiding 对话框中显示的所有内容并显示新内容。我可以将所有 html 写在一个模板中，然后 hide/show 它但是...有没有办法在该对话框模板中呈现不同的模板？这样我就可以为对话框中显示的内容设置不同的模板，并使用某种路由器在同一个对话框中呈现这些模板。这可能吗？

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

Answer 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

Answer 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 选择打开哪个对话框。

Angular JS Material 设计：一个mdDialog，多个模板

Angular JS Material Design: one mdDialog, multiple templates

javascript

angularjs

templates

material-design

angular-material