Javascript Angular JS材质设计:一个mdDialog,多个模板
我试图建立一个动态对话框,根据用户点击的内容显示不同的内容。这意味着删除/隐藏对话框上显示的所有内容并显示新内容。我可以在一个模板中编写所有html并隐藏/显示它,但是…有没有办法在该对话框模板中呈现不同的模板?这样我就可以为对话框中显示的内容使用不同的模板,并在同一个对话框中使用某种路由器来呈现这些模板。这可能吗Javascript Angular JS材质设计:一个mdDialog,多个模板,javascript,angularjs,templates,material-design,angular-material,Javascript,Angularjs,Templates,Material Design,Angular Material,我试图建立一个动态对话框,根据用户点击的内容显示不同的内容。这意味着删除/隐藏对话框上显示的所有内容并显示新内容。我可以在一个模板中编写所有html并隐藏/显示它,但是…有没有办法在该对话框模板中呈现不同的模板?这样我就可以为对话框中显示的内容使用不同的模板,并在同一个对话框中使用某种路由器来呈现这些模板。这可能吗 <md-dialog> <md-dialog-content ng-controller="someCtrl"> <a href="
<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>
您需要包括ngRoute模块以及链接到该模块的脚本标记 你会有一个这样的div
<div ng-view=""></div>
myApp.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl: './partials/things.html'
})
.when('/stuff',{
templateUrl: './partials/stuff.html'
})
.when('/otherstuff',{
templateUrl: './partials/otherstuff.html'
})
.otherwise({
redirectTo: '/',
})
});
var myApp = angular.module('myApp', ['ngRoute']);
当您包括ngRoute时,它会像这样
<div ng-view=""></div>
myApp.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl: './partials/things.html'
})
.when('/stuff',{
templateUrl: './partials/stuff.html'
})
.when('/otherstuff',{
templateUrl: './partials/otherstuff.html'
})
.otherwise({
redirectTo: '/',
})
});
var myApp = angular.module('myApp', ['ngRoute']);
这是ngRoute的文档。希望我能帮忙
是的,这是可能的。我认为我必须使用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选择要打开的对话框。谢谢!最后决定采用一种不同的方法,使用ng开关来切换视图中的div和视图中的div,但无论如何还是要感谢您!