在角度控制器中注册引导事件处理程序
Posted
技术标签:
【中文标题】在角度控制器中注册引导事件处理程序【英文标题】：Registering a bootstrap event handler in angular controller 【发布时间】：2014-06-12 12:42:52 【问题描述】：我是 Angular 和 javascript（有点）的新手，我正在尝试弄清楚如何将处理程序注册到我的控制器中的引导事件。
我想做这样的事情：
$('#mymodal').on('shown.bs.modal', function ()
$scope.password = undefined;
);
首先，我无法让 jQuery 在我的控制器中运行。根据我的研究，我感觉不建议这样做。这是真的？同样出于教育目的，如果我愿意，如何让 jQuery 在我的控制器中运行？
其次，我写了以下代码来代替 jQuery：
var modal = document.getElementById("mymodal");
modal.addEventListener('shown.bs.modal', function ()
$scope.password = undefined;
, false);
这也行不通。我认为'shown.bs.modal' 还没有被“检测到”。任何想法为什么？
我需要require bootstrap.js 文件来解决这个问题吗？
【问题讨论】：
【参考方案1】：看到这个plunker。
根据我的研究，我感觉不建议这样做。是 这是真的？也出于教育目的，我怎样才能让 jQuery 运行 如果我愿意，在我的控制器中？
是的，通常不建议在您的 Angular 应用程序中使用 jQuery，通常也没有必要。但是，如果您想使用它，您可以在包含 Angular 库之前简单地包含它（上面链接的 plunker 会这样做）。在这种情况下，Angular 的 jQuery (jqlite) 版本不支持在其 on() 事件注册方法中的名称空间，因此如果要使用引导程序，您可能需要使用 jQuery；但是，您可以改用 ui-bootstrap（角度版本的 bootstrap）（见下文）。
这也行不通。我认为'shown.bs.modal'不是 “检测到”至今。任何想法为什么？
我需要 bootstrap.js 文件来解决这个问题吗？
是的，您将需要 bootstrap.js。这是plunker的摘录：
标题包括：
<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>
但是，如果您只是想在每次打开模式时重置密码字段，这里有一种使用 ui-bootstrap 更简单、更有角度的方法。你可以查看完整的plunkerhere：
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');
);
【讨论】：
找不到更好的解释。谢谢！以上是关于在角度控制器中注册引导事件处理程序的主要内容，如果未能解决你的问题，请参考以下文章