TypeError：无法读取未定义的属性“打开”答案

【问题标题】：TypeError: Cannot read property 'open' of undefinedTypeError：无法读取未定义的属性“打开”
【发布时间】：2015-08-18 05:26:12
【问题描述】：

我正在尝试使用 Angular js 中的模态创建一个 POP UP。我正面临着问题。它说。

TypeError：无法读取未定义的属性“打开”。它抛出 $modal.open 语句。

配置代码如下：

homeModuleApp.config(function ($stateProvider) {

  $stateProvider.state('login', {
    url: '/login',
    //templateUrl: '/app/ng/modules/home/partials/login-partials-view.html',
    //controller: 'ModalDemoCtrl'
    onEnter: function($stateParams, $state, $modal) {
      $modal.open({
        templateUrl: '/app/ng/modules/home/partials/login-partials-view.html',
        resolve: {},
        controller: 'ModalDemoCtrl'
      }).result.then(function (result) {
        // $scope.$close
        alert('result ->' + result);
      }, function (result) {
        // $scope.$dismiss
        alert('dismiss ->' + result);
      }).finally(function () {
        // handle finally
        console.log('Hello....');
      });
    }

  })
});

谁能指导我可能是什么问题？

谢谢

【问题讨论】：

好吧，如果你得到“未定义”错误，你必须问自己为什么它是未定义的，它应该是什么。在您的代码中，您只需注入 $modal，但 $modal 是什么？ angular 默认没有 $modal，你有注入 $modal service/factory 的 angular 模块吗？
你还没有注入它（就像你注入了$stateProvider）；但是，由于它是一项服务，因此在 module.config() 部分时将不可用。另外，不同的汤姆 :)
@Tom 感谢您的回复。我是 Angular 新手，您能帮我实现同样的方法吗？

标签： angularjs node.js angular-ui-router angular-ui-bootstrap

【解决方案1】：

所以，here 我已经整理了一个 jsBin，它演示了如何使用您的代码执行此操作。

您不能在.config 部分中使用$modal 服务，因为services 在Angular 引导的那种状态下不可用（也许有些$modalProvider 是，但我不确定）。因此，您可以将状态设置为转到某个登录页面，例如：

.config(function($stateProvider) {
  $stateProvider
    .state('login', {
      url: '/',
      templateUrl: 'login.html',
      controller: 'loginController',
      controllerAs: 'vm'
  });
})

然后在该控制器中，您可以使用立即调用的函数表达式 (IIFE) 在控制器加载后立即触发，其中将包含您的 $modal.open 代码，例如：

.controller('loginController', function($modal) {
  (function() {
    $modal.open({
      templateUrl: 'loginModal.html',
      controller: 'loginModalController', 
      controllerAs: 'vm'
    }).result.then(function (result) {
      alert('result ->' + result);
    }, function (result) {
      alert('dismiss ->' + result);
    }).finally(function () {
      console.log('Hello....');
    });
  })();

【讨论】：

感谢您的帮助。它正在工作。您能否提供一些参考以更好地理解它。

【解决方案2】：

一种解决方案是将MatDialog 注入到构造函数中，例如：

constructor(
    public router: Router,
    public dialog: MatDialog
)

【讨论】：