Correct approach for angularjs modal transferring data to outer controller?

Question

Im wondering what is the correct approach about software design & best practice for angularjs modals. In my application I have the main window which is using its own controller, and there I have a show(), hide() & destroy functions for the modal. a button on my main window will show() the modal, there I'll have an isolate scope with variables inherited from parent scope, and its own controller. I'd want to be able to pass an object to the dialog, in order to do a "modify" operation on it, and a "Create" button which closes the modal and creates a new object of the data entered in the modal.

Im facing two issues: 1. Inability to transfer the object from the scope in my main controller and the one in my modal controller, unless having 1 controller with a predefined object, and then I can add data to it (But why it works?) 2. Inconsistency with show(),hide(): The show() Would have to reside in the main controller, but since the modal has a controller of its own, it will have to implement the hide() & destroy(), which feels very bad to me in terms of code responsibility.

What is a good practice in such situations?

Write the modal as a directive. Write the modal as a service or use the `$modal` of angular bootstrap If you want to pass data to your modal you can do it by passing it as attr. Inject the service in your controllers and use service's open, close etc. — Avraam Mavridis, Feb 23 '15 at 19:18
look at ngDialog for a nice implementation of what you are trying to do ... https://github.com/likeastore/ngDialog — mccainz, Feb 23 '15 at 19:20

score 0 · Answer 1 · answered Feb 23 '15 at 19:18

Not sure if these are best practices, but they work...

1:

In my controller:

$scope.modelData = {};  // This will be loaded from an ajax call or set somehow

In my dialog directive scope:

scope: {
    ngModel: "="
}

In my html:

<dialog-directive ng-model='modelData'></dialog-directive>

2: I choose to pass in an object that the directive will assign the functions to. You can then use this object in your controller to do things in your directive.

Controller:

$scope.dialogFuncs = {};

Directive:

scope: {
    ngModel: "=",
    dialogFuncs: "="
},
controller: ['$scope', function($scope) {
    $scope.dialogFuncs.openDialog = function() {
        // code to open the dialog here
    }

    $scope.dialogFuncs.closeDialog = function() {
        // close dialog code here
    }
}]

Html:

<dialog-directive ng-model='modelData' dialog-funcs='dialogFuncs'></dialog-directive>
....
<button ng-click='dialogFuncs.openDialog()'>Open Dialog</button>

Hope this helps.

score 0 · Answer 2 · answered Feb 23 '15 at 19:23

You can use the $modal service of angular-ui bootstrap or write your own, write your modal as a directive and use the open, close methods of the service inside your controllers.

e.g.

 $modal.open({
     template: '<my-modal something="cool"></my-modal>'
 })

Your directive could be something like this

  restrict: 'E'
  replace: false
  templateUrl: 'yourhtml.html'
  link: ($scope, $element, attrs) ->
      if attrs.something is cool
        console.log('cool')
      else
        $scope.$close()

Correct approach for angularjs modal transferring data to outer controller?

2 Answers2