Directive with a popup modal in angularjs

Question

I have a directive which will have a button/textarea/dropdown based on some condition it will appear. On click of that button a modal popup should be opened. How can i achieve this? I dont have any codes for creating a fiddle or plnkr.

Thanks in advance.

Answer 1

Here is the Snippet

//in your main html file
<webhook-params></webhook-params>

//your directive html code
<div class="form-inline">
  //show hide conditional scope available here
  <div class="form-group">
    <input type="text" class="form-control"  placeholder="Name" />
  </div>

  <div class="form-group">
    <button class="btn btn-default"
        aria-label="Remove" ng-click="someFunc()" >
      <i class="glyphicon glyphicon-remove"></i>
    </button>
  </div>
</div>

//in your app.js file
.directive('webhook-params', ['$scope', function($scope) {
  return {
    restrict: 'A',
    replace: true,
    transclude: true,
    scope: $scope,
    controller: 'ledgerController',
    templateUrl: "YOUR_TEMPLATE_URL"
  }
}])


//in your controller
$scope.someFunc = function(){
  //do something
  $scope.myModal = $modal({
    scope: $scope,
    templateUrl: 'your_file_path',
    show: true,
    backdrop: "static"
  });
}