未知提供者：eProvider <- e，当显示材料角对话框时。

Question

我正在尝试使用material angular的对话框。下面是代码。但是出现了错误：Unknown provider: eProvider <- e。

Js

var app = angular.module('app', ['ngMaterial']);

var dialogController = app.controller('dialogController', ['$scope', '$mdDialog', function($scope, $mdDialog) {
    $scope.hide = function () {
        $mdDialog.hide();
    };
    $scope.cancel = function () {
        $mdDialog.cancel();
    };
    $scope.answer = function (answer) {
        $mdDialog.hide(answer);
    };
}]);

app.controller('mainController', ['$scope', '$http', '$mdDialog', function ($scope, $http, $mdDialog) {
    $scope.showDialog = function (e) {
        e.preventDefault();
        $mdDialog.show({
            controller: dialogController,
            templateUrl: 'sign-in.html',
            targetEvent: e
        });
    };
}]);

Html

<a href="#" ng-click="showDialog($event)">Show dialog</a>

<script type="text/ng-template" id="sign-in.html">
    hello there
</script>

我有什么遗漏吗？

- Ian Davis

Answer 1

var app = angular.module('app', ['ngMaterial']);

var dialogController = function($scope, $mdDialog) {
   $scope.hide = function () {
      $mdDialog.hide();
   };
   $scope.cancel = function () {
      $mdDialog.cancel();
   };
   $scope.answer = function (answer) {
       $mdDialog.hide(answer);
   };
};

app.controller('mainController', ['$scope', '$http', '$mdDialog', function ($scope, $http, $mdDialog) {
    $scope.showDialog = function (e) {

      $mdDialog.show({
         controller: dialogController,
         templateUrl: 'sign-in.html',
         targetEvent: e
      });
   };
}]);

HTML中这样调用：

 <md-button class="md-primary" ng-click="showDialog($event)">Show dialog</md-button>

- nitin

---

我遇到了"无法读取未定义的属性'getBoundingClientRect'"和"未捕获的类型错误:无法读取未定义的属性'hasAttribute'"的问题。我不确定自己做错了什么。 - Ian Davis

糟糕，我刚刚只是在执行<a href="#" ng-click="showDialog($event)">显示对话框</a>而没有执行<md-button>。这样就解决了，非常感谢！ - Ian Davis

我从Angular Material网站的自定义对话框模板中复制/粘贴了示例，这样就解决了问题。我不得不在我的HTML中添加showDialog($event)。如果您可以更新您的答案以包含该$event，我会将其标记为正确！https://material.angularjs.org/#/demo/material.components.dialog - Ian Davis

您不能同时使用 href 和 ng-click。我已使用 showDialog($event) 更新了 HTML。 - nitin

对话控制器(dialogController)中的随机“]”没有“[”是什么意思？ - Laser

Answer 2

尝试在控制器名称中添加单引号：

$mdDialog.show({
    controller: 'dialogController',
    templateUrl: 'sign-in.html',
    targetEvent: e
});

编辑：我有一件事要更新，我知道为什么会出现“未定义的'getBoundingClientRect'”错误。您必须将此脚本用作模板：

<script type="text/ng-template" id="sign-in.html">
    <md-dialog> 
        <md-content>Hello there</md-content> 
    </md-dialog>    
</script>

顺便说一下，我的关于单引号的答案应该第一次就能起作用。使用这个新模板再试一次。

- Hieu TB

---

不幸的是，这给了我一个“无法读取未定义的getBoundingClientRect属性”的错误。 - Ian Davis

请检查是否需要“locals”属性，并正确提供它。因为我在这个例子中发现了一个类似的错误，当我删除“locals”时：http://codepen.io/ThomasBurleson/pen/qEBJME - Hieu TB

提供 locals: {} 后，我得到了参数 'fn' 不是函数，而是对象的错误提示。 - Ian Davis

抱歉，我现在发现空对象的_locals_是不必要的。关于“getBoundingClientRect”错误，请查看我的更新。 - Hieu TB