nkn*_*knj 4 javascript jquery twitter-bootstrap angularjs
我是角度和javascript(有点)的新手,我想弄清楚如何在我的控制器中为一个bootstrap事件注册一个处理程序.
我想做这样的事情:
$('#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文件来修复此问题吗？
看到这个plunker.
根据我的研究,我感觉不推荐.这是真的？同样出于教育目的,如果我愿意,如何在我的控制器中运行jQuery？
是的,通常不建议在角度应用程序中使用jQuery,也不是一般必需的.但是,如果你想使用它,你可以在包含角度库之前简单地包含它(链接到上面的plunker就是这样).在这种情况下,angular的jQuery版本(jqlite)在它的on()事件注册方法中不支持命名空间,所以如果你要使用bootstrap,你可能需要使用jQuery; 但是,你可以使用ui-bootstrap(bootstrap的角度版本)代替(见下文).
这也行不通.我认为'shown.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>
但是,如果您只是想在每次打开时重置模态中的密码字段,这里使用ui-bootstrap这是一种更简单,更有棱角的方法.你可以在这里查看完整的plunker :
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');
}
});
| 归档时间： |
|
| 查看次数： |
4639 次 |
| 最近记录： |