CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrapbootstrap-modal
Tharusha
Tharusha

Reputation: 661

Use a different angular controller for bootstrap modal

I'm calling for the bootstrap modal HTML file from my main HTML file here is an example code of what I'm doing. Link 

<div class="container" ng-controller="MainAngularControler"> <!--The main div with the controller in it-->

As it shows can anyone suggest a way to call another Angular controller for bootstrap modal. because the button that calls for the modal to load is in a div which already has an angular controller, this doesn't let the modal to load another different angular controller. The idea behind all these is to make my code more understandable.

Upvotes: 0

Views: 1866

Answers (1)

Alok
Alok

Reputation: 1310

When creating the modal instance in your angular controller you need to pass the modal controller like this.

var modalInstance = $uibModal.open({
    ariaLabelledBy: 'modal-title',
    ariaDescribedBy: 'modal-body',
    templateUrl: 'myModalContent.html',
    size: "lg",
    controller: 'modalController'
  });

Have a look at this plunker or the code below.

var app = angular.module('plunker', ["ui.bootstrap"]);

app.controller('MainCtrl', function($scope, $uibModal) {
  $scope.name = 'World';
    
    $scope.OpenModal = function(){
      var modalInstance = $uibModal.open({
        ariaLabelledBy: 'modal-title',
        ariaDescribedBy: 'modal-body',
        templateUrl: 'myModalContent.html',
        size: "lg",
        controller: 'modalController'
      });
  
      modalInstance.result.then(function (selectedItem) {
        //$ctrl.selected = selectedItem;
      }, function () {
        //$log.info('Modal dismissed at: ' + new Date());
      });
    };
});

app.controller('modalController', function($scope){
  $scope.text = 'I am from modal controller SCOPE';
});
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title" id="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body" id="modal-body">
            THIS IS A MODAL. {{text}}
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">OK</button>
            <button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
        </div>
    </script>
    <a ng-click="OpenModal()">Open Modal</a>
  </body>

</html>

Upvotes: 1

Related Questions