Question

我正在尝试构建一个动态对话框，根据用户点击的内容显示不同的内容。这意味着擦除/隐藏对话框中显示的所有内容并显示新内容。我可以在一个模板中编写所有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>

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 Design：一个mdDialog，多个模板

2 个答案: