AngularJS可重复使用的模式引导指令 [英] AngularJS reusable modal bootstrap directive

问题描述

我是新与AngularJS。我想实现一个可重用的模式引导。

这是的index.html：
    

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

这是HTML模板：

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">&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： code
谢谢。

推荐答案

我建议你不绑定到 NG-点击。它的其他一些神奇的东西，可以用螺丝的东西。还有一个语法错误在你的部分。

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=$p$ PVIEW

要总结一下：

的script.js

更改 callbackbuttonright 从 ngClick 绑定到 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

修改数据-NG-点击到数据-NG-点击右键按钮

<modal lolo="modal1" modal-body="body" modal-footer="footer" modal-header="header" data-ng-click-right-button="myRightButton()"></modal>

另外一个小问题：

Another minor issue:

partialmodal.html

修改，到;

<button type="button" class="btn btn-primary" data-ng-click="callbackbuttonright(); $event.stopPropagation()">Launch Alert</button>

这篇关于AngularJS可重复使用的模式引导指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！