0

I've created a small demo to use when i need to open a modal window in Angular. Using a directive as the modal window template.

What im not sure about is the way im passing data/functions to the modal.

The opening controller:

    $scope.openModal = function($event){
       $scope.items = [1,2,3,4,5];
       $scope.modalInstance =  $modal.open({
           template: '<modalwindow></modalwindow>',
           scope:$scope,
           test:'akex'
    });

    $scope.modalInstance.result.then(function (selectedItem) {
        console.info(selectedItem);
    }, function () {
        console.info('Modal dismissed at: ' + new Date());
    });

and the modal directive:

 angular.module('angModalApp')
 .directive('modalwindow', function () {
   return {
      templateUrl: 'scripts/directives/modalwindow.tmpl.html',
      restrict: 'E',
      link: function postLink(scope, element, attrs) {
          scope.ok = function () {
              scope.modalInstance.close(["a","b","c"]);
          };

          scope.cancel = function () {
              scope.modalInstance.dismiss('cancel');
          };
  }
};
});

What im asking is what you guys think about such use of the modal. Is there a better way of doing it?

Thank you for your time.

The source of the project can be found at: https://github.com/trostik/angular-modal-window-demo

Improve this question

2 Answers 2

Reset to default
0

I would recommend you to use Angular-UI/bootstrap: http://angular-ui.github.io/bootstrap/

it is easy to implement and stable.

Improve this answer
3
  • Hi, if you look at the index im actually already using angular-ui-bootstrap for this one. The issue is that im looking to make the modal window a directive. And then pass the modalInstance to it. But that does not work so im passing in the scope with the modalInstance as a param. This is the problematic part imho.
    – user1672155
    Commented Oct 27, 2013 at 7:04
  • Angular-ui already has a directive for your modal, all you need to do is to write the controller for your view and not the directive. check this out:plnkr.co/edit/jpJX4WvHw0SSYm3pAAzq?p=preview
    – Shavit Cohen
    Commented Oct 27, 2013 at 7:06
  • Just pushed a new solution after looking into the modal.js (angular-ui-bootstrap) looks like you are right. The only thing i did different is used a module.controller('ctrname' to create a controller and not var ctrname = function . To add it to module and not whole app.
    – user1672155
    Commented Oct 27, 2013 at 7:46
0

The best way to pass data into directives of that kind is usually via an isolate scope.

Taken from http://docs.angularjs.org/guide/directive:

<!doctype html>
<html ng-app="docsIsolateScopeDirective">
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-controller="Ctrl">
      <my-customer customer="naomi"></my-customer>
      <hr>
      <my-customer customer="igor"></my-customer>
    </div>
  </body>
</html>

Notice how they're using custom attributes on the directive myCustomer to pass in data from the scope of the controller Ctrl.

To access this data, the directive definition should use the scope option:

  .directive('myCustomer', function() {
  return {
    restrict: 'E',
    scope: {
      customer: '=customer'
    },
    templateUrl: 'my-customer.html'
  };
});

You can see how under scope, customer is specified. The value- =customer tells Angular to create a two-way data binding between the data specified as attribute to a property on the isolate scope of the directive, defined as customer. You can also just specify = for a shorter way to this, which in this case, it will create the reference on the directive's scope as the same name of the attribute. If you need to pass in data shouldn't be changed inside the directive, you should use the @ symbol instead of =, and if you need to pass in functions, you should use the & symbol.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.