AngularJS 可重用的模态引导指令
[英] AngularJS reusable modal bootstrap directive
本文介绍了AngularJS 可重用的模态引导指令的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是 AngularJS 的新手.我正在尝试实现一个可重用的模态 Bootstrap.
这是 index.html:
<modal lolo="modal1" modal-body='body' modal-footer='footer' modal-header='header' data-ng-click="myRightButton()"></modal><a href="#{{modal1}}" role="button" class="btn btn-success" data-toggle="modal">Launch Demo Modal</a>
这是模块、控制器和指令:
var myModal = angular.module('myModal', []);myModal.controller('mymodalcontroller', function ($scope) {$scope.header = '把你的标题放在这里';$scope.body = '把你的身体放在这里';$scope.footer = '把你的页脚放在这里';$scope.myRightButton = 函数(布尔){alert('!!!第一个函数调用！');};});myModal.directive('modal', function () {返回 {限制:'EA'，范围: {标题:'=modalTitle'，标题:'=modalHeader'，正文:'=modalBody'，页脚:'=modalFooter'，callbackbuttonleft: '&ngClickLeftButton',callbackbuttonright: '&ngClick',处理程序:'=lolo'},templateUrl: 'partialmodal.html',转置:真实，控制器:函数($scope){$scope.handler = 'pop';},};});
这是html模板:
<div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title">{{header}}</h4>
<div class="modal-body"><p class="text-warning">{{body}}</p>
<div class="modal-footer"><p class="text-left">{{footer}}</p><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary" data-ng-click="callbackbuttonright(), $event.stopPropagation()">保存更改</button>
我希望启动警报"按钮(在模式中)执行警报并且它做得很好.问题是它在单击模态中的取消"按钮和窗口关闭时启动.有什么想法吗?
这是工作代码:代码
谢谢.
解决方案
我建议你不要绑定到 ng-click.它还有一些其他神奇的东西，可以搞砸.你的部分也有语法错误.
我已经在我的 fork 中修复了这些问题:
http://plnkr.co/edit/2jK2GFcKSiKgMQMynD1R?p=preview
总结:
script.js:
将您的 callbackbuttonright 绑定从 ngClick 更改为 ngClickRightButton
myModal.directive('modal', function () {返回 {限制:'EA'，范围: {标题:'=modalTitle'，标题:'=modalHeader'，正文:'=modalBody'，页脚:'=modalFooter'，callbackbuttonleft: '&ngClickLeftButton',callbackbuttonright: '&ngClickRightButton',处理程序:'=lolo'},templateUrl: 'partialmodal.html',转置:真实，控制器:函数($scope){$scope.handler = 'pop';},};});
index.html:
将data-ng-click改为data-ng-click-right-button
<modal lolo="modal1" modal-body="body" modal-footer="footer" modal-header="header" data-ng-click-right-button="myRightButton()"></modal>
另一个小问题:
partialmodal.html:
将,改为;
<button type="button" class="btn btn-primary" data-ng-click="callbackbuttonright(); $event.stopPropagation()">Launch Alert</button>
I'm new with AngularJS. I'm trying to implement a reusable modal Bootstrap.
This is the index.html:
<div ng-controller="mymodalcontroller">
<modal lolo="modal1" modal-body='body' modal-footer='footer' modal-header='header' data-ng-click="myRightButton()"></modal>
<a href="#{{modal1}}" role="button" class="btn btn-success" data-toggle="modal">Launch Demo Modal</a>
</div>
This is the module, controller and directive:
var myModal = angular.module('myModal', []);
myModal.controller('mymodalcontroller', function ($scope) {
$scope.header = 'Put here your header';
$scope.body = 'Put here your body';
$scope.footer = 'Put here your footer';
$scope.myRightButton = function (bool) {
alert('!!! first function call!');
};
});
myModal.directive('modal', function () {
return {
restrict: 'EA',
scope: {
title: '=modalTitle',
header: '=modalHeader',
body: '=modalBody',
footer: '=modalFooter',
callbackbuttonleft: '&ngClickLeftButton',
callbackbuttonright: '&ngClick',
handler: '=lolo'
},
templateUrl: 'partialmodal.html',
transclude: true,
controller: function ($scope) {
$scope.handler = 'pop';
},
};
});
And this is the html template:
<div id="{{handler}}" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">{{header}}</h4>
</div>
<div class="modal-body">
<p class="text-warning">{{body}}</p>
</div>
<div class="modal-footer">
<p class="text-left">{{footer}}</p>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-ng-click="callbackbuttonright(), $event.stopPropagation()">Save changes</button>
</div>
</div>
</div>
</div>
I want the 'Launch Alert' button (in the modal) executes the alert and it does it well. The problem is that it is launched when clicking the 'Cancel' button in the Modal and when the window closes. Any ideas?
Here is the working code:Code
Thank you.
解决方案
I would suggest you not bind to ng-click. It does some other magic stuff that can screw with things. There is also a syntax error in your partial.
I've fixed those issues in my fork here:
http://plnkr.co/edit/2jK2GFcKSiKgMQMynD1R?p=preview
To summarize:
script.js:
Change your callbackbuttonright binding from ngClick to ngClickRightButton
myModal.directive('modal', function () {
return {
restrict: 'EA',
scope: {
title: '=modalTitle',
header: '=modalHeader',
body: '=modalBody',
footer: '=modalFooter',
callbackbuttonleft: '&ngClickLeftButton',
callbackbuttonright: '&ngClickRightButton',
handler: '=lolo'
},
templateUrl: 'partialmodal.html',
transclude: true,
controller: function ($scope) {
$scope.handler = 'pop';
},
};
});
index.html:
Change data-ng-click to data-ng-click-right-button
<modal lolo="modal1" modal-body="body" modal-footer="footer" modal-header="header" data-ng-click-right-button="myRightButton()"></modal>
Another minor issue:
partialmodal.html:
Change , to ;
<button type="button" class="btn btn-primary" data-ng-click="callbackbuttonright(); $event.stopPropagation()">Launch Alert</button>
这篇关于AngularJS 可重用的模态引导指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
