0

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.

7
  • 1
    DI Just inject the dependency to the controller which requires it. Commented Mar 6, 2017 at 10:20
  • stackoverflow.com/questions/25596809/… Commented Mar 6, 2017 at 10:27
  • You can try angular-ui.github.io/bootstrap/#!#modal. Commented Mar 6, 2017 at 10:27
  • Dear @Jai thank you for your comment. can you be more specific. how can I Start on the process. Commented Mar 6, 2017 at 10:29
  • Dear @SaurabhAgrawal thank you for the comment. Commented Mar 6, 2017 at 10:34

1 Answer 1

1

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>

Sign up to request clarification or add additional context in comments.

3 Comments

Dear @Alok Thank you for your answer. I feel like I'm on the right track now. do I have to include both controllers in to the same app or can I make two different apps. and also If I move the modal content in to a different HTML file will this work.
Dear @Alok. Man you did the trick. can you edit the answer from creating a separate HTML file for the Modal and another JS file to do stuff in the modal so I can mark this as the answer. This question is asked to organize my code more effectively. and this helped me a lot thanks.
I have updated the plunk to have a separate html file but wont be able to do that in the SO code sample.

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.