angularjsangular-ui-bootstrapangular-ui-modal

How do you access a parent function from UI Bootstrap Modal?


I'm trying to use a UI Bootstrap modal, vs a regular Bootsrap modal. I have a $scope.DoIt = function() in the parent controller, but when I try to call it from the modal, nothing happens.

What am I doing wrong?

How do you access a function in the parent controller?

Here is how I open the modal:

    applyConfirm: function() {

  if(self.showingExpenses !== true) {

    self.showingExpenses = true;
    var modalInstance = $modal.open({
      animation: true,
      templateUrl: 'applyConfirm.html',
      controller: function($scope, $modalInstance, expenses, jobsService, job) { //'ModalInstanceCtrl',

        angular.extend($scope, {
          expenses: expenses,
          job: job
        });

        $scope.close = function() {
          //self.showingExpenses = false;
          $modalInstance.close();
        };
      }
}

Solution

  • You can set the parent scope for the modal using the scope configuration passed in to $uibModal.open, eg

    $uibModal.open({
        scope: $scope
        // other properties, etc
    })
    

    Angular scope inheritance should then make the Dolt method available

    controller: function($scope, $uibModalInstance /*, etc */) {
        $scope.Dolt(); // this will call the parent scope method