Launching modal on parent from a directive

Question

I have a view with a ui.bootstrap modal that has its own controller.

In the view, i have a directive that generates a number of buttons with a unique ID.

I want to be able to click on one of the buttons generated and call the main view's controller to launch the modal.

Here is the main view module:

/* global angular */

angular.module('my.jobs', [
  'ui.router',
  'ui.bootstrap'
])

.controller('DashboardJobsCtrl', function     DashboardJobsController($rootScope, $scope, $log, $state, $modal) {

  var self = this;

  angular.extend(this, {

displayReceipt: function(jobId) {

  var modalInstance = $modal.open({
    animation: true,
    templateUrl: 'receiptModal.html',
    size: 'lg',
    controller: function($scope, $modalInstance, jobsService) {

      //CODE HERE FOR ADDING VALUES TO THE MODAL...


        $scope.clear = function() {
          $modalInstance.close();
        };
        }
      });
    }
  });
});

Here is the directive:

angular.module('jobView', ['ui.router', 'ui.bootstrap'])

.directive('jobView', function($compile, $http, $templateCache, DOMAINS) {

  return {
    restrict: 'E',
    scope: {
      job: '=',
      view: '@'
},
template: 'myTemplate.html',
link: function($scope, element, attrs) {

  //ASSUME THERE IS CODE HERE FOR GENERATING UNIQUE ID FOR JOBS


  //NEXT LINE I WANT TO CALL MODAL FROM THE MAIN VIEW MODULE

  $scope.displayReceipt('jobId')

    }
  };
});

I know this is a simple scope issue, but it's driving me nuts that I can't make the connection.

Directives are generic entities. You should not call controller methods from here but provide callback methods that calls displayReceipt. You need to expose a method from directive — Thanigainathan, Mar 17 '16 at 18:05
Hi Thaniainathan, do you have an example of how that would work? — cnak2, Mar 17 '16 at 18:47

score 0 · Answer 1 · edited May 23 '17 at 12:31

Here is the perfect example. calling method of parent controller from a directive in AngularJS.

I have update your example below.

<job-View updateParent='displayReceipt()'></job-View>
angular.module('jobView', ['ui.router', 'ui.bootstrap'])

.directive('jobView', function($compile, $http, $templateCache, DOMAINS) {

  return {
    restrict: 'E',
    scope: {
    job: '=',
      view: '@',
      updateParent:'&'
},
template: 'myTemplate.html',
link: function($scope, element, attrs) {

  //ASSUME THERE IS CODE HERE FOR GENERATING UNIQUE ID FOR JOBS
  //NEXT LINE I WANT TO CALL MODAL FROM THE MAIN VIEW MODULE

$scope.displayReceipt('jobId')

    }
  };
});

Launching modal on parent from a directive

1 Answers1