要在AngularJS Material UI中实现从所点击的元素中弹出对话框,可以使用AngularJS的事件绑定和AngularJS Material UI的对话框组件。
首先,在HTML模板中,使用ng-click指令将点击事件绑定到所点击的元素上,并传递所点击的元素作为参数到控制器中:
然后,在控制器中,使用$mdDialog服务来显示对话框。在showDialog函数中,使用$mdDialog.show方法来显示对话框,并设置对话框的配置项。其中,targetEvent选项可以用来指定对话框的位置,将其设置为传递的事件对象$event即可:
app.controller('MyController', function($scope, $mdDialog) {
$scope.showDialog = function(ev) {
$mdDialog.show({
controller: DialogController,
templateUrl: 'dialog.html',
targetEvent: ev,
});
};
function DialogController($scope, $mdDialog) {
$scope.hide = function() {
$mdDialog.hide();
};
}
});
最后,在dialog.html模板中,编写对话框的内容:
这是一个对话框
对话框的内容
关闭
确保将以上代码保存为合适的文件,并在页面中引入相关的库和文件。
这样,当点击所指定的元素时,将会从该元素中弹出一个对话框。