Question

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

TypeError：无法读取未定义的属性“open”。它抛出$ 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....');
      });
    }

  })
});

任何人都可以指导我可能出现的问题吗？

由于

Answer 1

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

您无法在$modal部分使用.config服务，因为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：无法读取未定义的属性“open”

2 个答案: