Register bootstrap event handler in angular controller

Question

Register bootstrap event handler in angular controller

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

I want to do something like this:

$('#mymodal').on('shown.bs.modal', function () {
   $scope.password = undefined;
});

Firstly, I cannot run jQuery to run in my controller. From my research, I feel that this is not recommended. It's true? Also for educational purposes, how can I run jQuery in my controller if I want?

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 does not work either. I think 'shown.bs.modal'it has not yet been discovered. Any ideas why?

Do I need to use a requirefile bootstrap.jsto fix this?

+4

javascript jquery angularjs twitter-bootstrap

nknj 26 . '14 20:31

1

Trevor · Accepted Answer · 2014-04-26T21:01:28+0000

plunker.

, . ? , jQuery , ?

, jQuery angular , . , , , angular ( plunker ). jQuery (jqlite) angular on() , , , jQuery, ; ui-bootstrap ( bootstrap angular) (. ).

. , ' .bs.modal' "" . , ?
, bootstrap.js ?

, bootstrap.js. :

:

<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 data-require="bootstrap-css@3.1.1" 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>

, reset , , angular, ui-bootstrap. :

  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');
    }
  });

Register bootstrap event handler in angular controller

More articles: