TypeError: Cannot read property 'open' of undefined

Question

我正在尝试使用 angular js.I 中的模式创建 POP UP，issue.Its 说。

TypeError: Cannot read property 'open' of undefined. Its throwing at $modal.open statement.

配置代码如下：

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....');
      });
    }

  })
});

任何人都可以指导我可能是什么问题吗？

谢谢

Answer 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....');
    });
  })();

Answer 2

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

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

TypeError: Cannot read property 'open' of undefined

TypeError: Cannot read property 'open' of undefined

node.js

angularjs

angular-ui-bootstrap

angular-ui-router