Question

100

Registering a bootstrap event handler in angular controller

rated 0 times [ 106] [ 6] / answers: 1 / hits: 5582 / 10 Years ago, sat, april 26, 2014, 12:00:00

I am new to angular and javascript (sort of) and am trying to figure out how I can register a handler to a bootstrap event in my controller.

I want to do something like this:

$('#mymodal').on('shown.bs.modal', function () {

   $scope.password = undefined;

});

Firstly, I can't get jQuery to run within my controller. From my research I am getting a feeling that it is not recommended. Is this true? Also for educational purposes, how could I make jQuery run in my controller if I wanted to?

Secondly, I wrote the following as a replacement for jQuery:

var modal = document.getElementById(mymodal);

modal.addEventListener('shown.bs.modal', function () {

  $scope.password = undefined;

}, false);

This doesn't work too. I think that 'shown.bs.modal' is not being detected as yet. Any ideas why?

Do I need to require the bootstrap.js file to fix this?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

joanneamiyaa

Add To Favorites

Follow

Total Points: 532

Total Questions: 127

Total Answers: 98

Location: Guam

Member since Tue, Nov 3, 2020

4 Years ago

answered 10 Years ago alli · Accepted Answer

See this plunker.

From my research I am getting a feeling that it is not recommended. Is
this true? Also for educational purposes, how could I make jQuery run
in my controller if I wanted to?

Yes, generally using jQuery in your angular application is not recommended, nor is it generally necessary. However, if you want to use it, you can simply include it before you included the angular library (the plunker linked to above does this). In this case, angular's version of jQuery (jqlite) doesn't support namespaces in it's on() method for event registration, so you probably would need to use jQuery if you're going to use bootstrap; however, you could use ui-bootstrap (the angular version of bootstrap) instead (see below).

This doesn't work too. I think that 'shown.bs.modal' is not being
detected as yet. Any ideas why?

Do I need to require the bootstrap.js file to fix this?

Yes, you will need bootstrap.js. Here's an excerpt from the plunker:

Header includes:

<head>

  <script data-require=jquery@* data-semver=2.0.3 src=http://code.jquery.com/jquery-2.0.3.min.js></script>

  <script data-require=bootstrap@* data-semver=3.1.1 src=//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js></script>

  <script data-require=angular.js@* data-semver=1.3.0-beta.5 src=https://code.angularjs.org/1.3.0-beta.5/angular.js></script>

  <link [email protected] data-semver=3.1.1 rel=stylesheet href=//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css />

</head>

JavaScript:

<script>

  var app = angular.module('myapp', []);

  app.controller('mycontroller', function($scope, $timeout){

    $scope.test = 'Hello World!';

    $('#myModal').on('show.bs.modal', function (e) {

      $timeout(function(){

        $scope.test = 'Model has been opened!';  

      });

    })

  });

</script>

However, if you simply want to reset the password field in a modal each time it is open, here's a simpler, more angular way to do it using ui-bootstrap. You can view the full plunker here:

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

  app.controller('myController', function($scope, $modal){

    $scope.test = 'Hello World!';

    $scope.openPopup = function(){

      $modal.open({

        templateUrl: popup.html,

        controller: myModalController,

        resolve: {

          form: function() {

            return {

              username: 'default_username',

              password: 'default_password',

            }

          }

        }

      });

    }

  });

  app.controller('myModalController', function($scope, $modalInstance, form){

    $scope.form = form;

    $scope.close = function(){

      $modalInstance.dismiss('cancel');

    }

  });