angularjs – $mdDialog打开但出现以下错误.无法读取属性’getBo

发布时间：2020-12-17 18:01:38 所属栏目：安全来源：网络整理

导读：我想在点击图标时生成对话框.单击md-icon时出现以下错误.对话框打开,但我在控制台上看到以下错误： TypeError: Cannot read property 'getBoundingClientRect' of undefinedat transformToClickElement (angular-material.js:4652)at dialogPopIn (angular-m

我想在点击图标时生成对话框.单击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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!