我想在点击图标时生成对话框.单击md-icon时出现以下错误.对话框打开,但我在控制台上看到以下错误：
TypeError: Cannot read property 'getBoundingClientRect' of undefined at transformToClickElement (angular-material.js:4652) at dialogPopIn (angular-material.js:4630) at Object.onShow (angular-material.js:4538) at InterimElementFactory.self.show.compilePromise.then.showDone (angular-material.js:1827) at processQueue (angular.js:13248) at angular.js:13264 at Scope.$get.Scope.$eval (angular.js:14466) at Scope.$get.Scope.$digest (angular.js:14282) at Scope.$get.Scope.$apply (angular.js:14571) at done (angular.js:9698) angular-material.js:824 Uncaught TypeError: Cannot read property 'hasAttribute' of undefined
以下是我的HTML代码段.
<md-button class="md-fab md-primary" ng-click="showAdvanced($event)"
aria-label="AddClient">
<md-icon md-svg-src="content/images/68448.svg"
style="width: 48px; height: 48px;">
</md-icon>
<md-tooltip md-visible="demo.showTooltip">
Add Client
</md-tooltip>
</md-button>
HTML页面的控制器如下.
$scope.showAdvanced = function(ev) {
$mdDialog.show({
controller: 'newClient',templateUrl: 'app/views/xyz/newClient.html',targetEvent: ev
});};
对话HTML
<md-content class="md-padding" layout="row" layout-sm="column" style="font-size:1.2em">
<form name="myForm" >
<div layout layout-sm="column">
<md-input-container style="width:80%">
<label>Name</label>
<input ng-model="create.Name">
</md-input-container>
</div>
</md-content>
谢谢
解决方法
您缺少一个包装md-dialog标记.根据文件：
The dialog’s template must have an outer md-dialog element. Inside,use an md-content element for the dialog’s content,and use an element with class md-actions for the dialog’s actions.
试试这个：
<md-dialog>
<md-content>
<md-button class="md-fab md-primary" ng-click="showAdvanced($event)" aria-label="AddClient">
<md-icon md-svg-src="content/images/68448.svg" style="width: 48px; height: 48px;"></md-icon>
<md-tooltip md-visible="demo.showTooltip">
Add Client
</md-tooltip>
</md-button>
</md-content>
</md-dialog>
