Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了AngularJS可重用模态引导指令大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我是AngularJS的新手.我正在尝试实现可重用的模态Bootstrap.
这是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>

这是模块,控制器和指令:

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

这是html模板:

<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">&times;</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>

我希望“启动警报”按钮(在模态中)执行警报并且它做得很好.问题是,单击模态中的“取消”按钮并关闭窗口时会启动它.有任何想法吗?
这是工作代码Code谢谢.

我建议你不要绑定到ng-click.它做了一些其他可以搞砸东西的神奇东西.部分中也存在语法错误.

在这里解决了这些问题:

http://plnkr.co/edit/2jK2GFcKSiKgMQMynD1R?p=preview

总结一下:

的script.js:

将您的回调按钮绑定从ngClick更改为ngClickRightButton

@H_33_3@mymodal.directive('modal',callBACkbuttonright: '&ngClickRightButton',}; });

index.html的:

更改数据-ng-单击以数据-ng-单击右键

<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>

大佬总结

以上是大佬教程为你收集整理的AngularJS可重用模态引导指令全部内容,希望文章能够帮你解决AngularJS可重用模态引导指令所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。