AngularJS模态框报错：TypeError: Cannot read property 'open' of undefined求助

Hey there, let's figure out why you're hitting this TypeError: Cannot read property 'open' of undefined error when trying to call the modal from your controller. Here are the key fixes and checks you need to make:

This is the most likely root cause of your issue. Look closely at your controller's dependency array and function parameters—they don't line up at all, which is breaking the injection of $modal:

Your current injection array:

['$scope', 'toaster', '$state', '$http', 'emodal', '$timeout', '$compile','$filter','$modal','$rootScope']

But your function parameters add extra services (DTOptionsBuilder, DTColumnBuilder, DTColumnDefBuilder, $interval) that aren't in the injection array, and shift the position of $filter, $modal, and $rootScope completely out of alignment. AngularJS injects services by position, so this misorder means $modal is being assigned to an undefined value instead of the actual modal service.

Fix this by making the injection array and function parameters match exactly. If you need those Datatables services, add them to the injection array in the same order as the parameters:

app.controller('unitMasterCntlr', [
  '$scope', 
  'toaster', 
  '$state', 
  '$http', 
  'emodal', 
  '$timeout', 
  '$compile',
  'DTOptionsBuilder', 
  'DTColumnBuilder', 
  'DTColumnDefBuilder', 
  '$interval',
  '$filter',
  '$modal',
  '$rootScope', 
  function ($scope, toaster, $state, $http, emodal, $timeout, $compile, DTOptionsBuilder, DTColumnBuilder, DTColumnDefBuilder, $interval, $filter, $modal, $rootScope) {
    // Your controller logic here
  }
]);

The $modal service comes from AngularUI Bootstrap, so you need to make sure your app module depends on ui.bootstrap when you define it:

var app = angular.module('yourAppName', ['ui.bootstrap', /* other required modules */]);

If you skip this step, the $modal service won't exist at all, leading to the same undefined error.

Once the injection is fixed, confirm your $modal.open() call follows the correct format, like this example:

var modalInstance = $modal.open({
  templateUrl: 'path/to/your-modal-template.html',
  controller: 'YourModalController',
  resolve: {
    // Optional: Pass data to the modal controller
    modalData: function() {
      return $scope.someData;
    }
  }
});

内容的提问来源于stack exchange，提问作者rahuLrajaN