CODEWITHSUNDEEP
angularjsangularjs-directive
Arief Grando
Arief Grando

Reputation: 209

AngularJS directive to modal dialog

I would like to send a value from button data-id to a modal dialog.

I have wrote this :

Button HTML

<button ui-sref=".modal" btn-attr-click data-id="{{data.nip}}">Simulasi</button>

State angular :

var routerApp = angular.module('routerApp', ['ui.router','agGrid','angular.filter','ngAnimate']);

routerApp.config(function($stateProvider, $urlRouterProvider) {

        .state('masterpegawai.alltalenta.modal', {
            url: '/modal',
            views:{
                "modal": {
                    templateUrl : 'public/js/modal.html'
                }
            }
         })

}

});

Directive

routerApp.directive('btnAttrClick', function() {
  return {
    controller: 'simulate',
    link: function(scope, element, attr) {
      element.on('click', function() {
        scope.nip = attr.id;
      })
    }
  }
})

The Modal dialog

<div class="modal-overlay fade">
  <div class="modal-content">
  <h2>Modal</h2>
  This modal has a substate.  <a ui-sref=".substate">{{nip}}</a>
  <div ui-view='modal'></div>
  <a ui-sref="app">{{nip}}</a>
  </div>
</div>

The modal does shows up but the value of data-id={{data.nip}}" doesn't shown in modal dialog

Upvotes: 1

Views: 1744

Answers (3)

Cosmin Ababei
Cosmin Ababei

Reputation: 7072

Since you're using ui-router, you could simply define the ID as a state parameter (both query or url params would work for you).

Then you can access all of the state's params using $stateParams. For this you'll need to define a controller for the modal view inside masterpegawai.alltalenta.modal.

The edited state:

.state('masterpegawai.alltalenta.modal', {
  url: '/modal?nip',
    views:{
    "modal": {
      controller: ['$scope', '$stateParams', function ($scope, $stateParams) {
        $scope.nip = $stateParams.nip;
      }],
      templateUrl : 'public/js/modal.html'
    }
  }
})

The edited button:

<button ui-sref=".modal({nip:data.nip})">Simulasi</button>

Notice that there's no need for btnAttrClick directive as nip is passed through $stateParams. Also notice that I've added a controller for the modal view just to bind the data (in our case, nip) to the $scope.

Upvotes: 2

Ankur Soni
Ankur Soni

Reputation: 746

u can use angular-ui-bootstarp where we have directives created on bootstrap.

moreover u can also send data in resolves.

e.g.

var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

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

here u can see that 

resolve: {
            items: function () {
              return $scope.items;
            }
          }

is used to send the data to modal and on ok we get the same data bound to scope.

if u want to have your own directive u can simply create a wrapper over angular-ui-bootstrap-modal. :) for more info please have a look here :

https://angular-ui.github.io/bootstrap/

Upvotes: 0

hurricane
hurricane

Reputation: 6734

You need to define scope = true or scope = false

  • Scope : False ( Directive uses its parent scope )

Code:

routerApp.directive('btnAttrClick', function() {
  return {
    controller: 'simulate',
    scope : false,
    link: function(scope, element, attr) {
      element.on('click', function() {
        scope.nip = attr.id; // parent scope
      })
    }
  }
})
  • Scope : True ( Directive gets a new scope )

Code:

routerApp.directive('btnAttrClick', function() {
  return {
    controller: 'simulate',
    scope:true,
    link: function(scope, element, attr) {
      element.on('click', function() {
        scope.nip = attr.id; // new scope for new element
      })
    }
  }
})

Upvotes: 0

Related Questions