Question

我是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
谢谢。

Answer 1

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

我在这里解决了这些问题：

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

总结：

<强>的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 ：

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

Answer 2

如果有人仍感兴趣，here是我最近使用bootstrap modal和angularjs指令的一个例子。

<强> HTML：

    <modal visible="showModal1" on-sown="modalOneShown()" on-hide="modalOneHide()">
        <modal-header title="Modal Titel 1"></modal-header>
        <modal-body>
            <h3>This is modal body</h3>
        </modal-body>
        <modal-footer>
            <button class="btn btn-primary"  ng-click="hide(1)">Save</button>
        </modal-footer>
    </modal>

<强> JavaScript的：

    var myModalApp = angular.module('myModalApp',[]);

myModalApp.directive('modal', function(){
        return {
            template: '<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"><div class="modal-dialog modal-sm"><div class="modal-content" ng-transclude><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title" id="myModalLabel">Modal title</h4></div></div></div></div>', 
            restrict: 'E',
            transclude: true,
            replace:true,
            scope:{visible:'=', onSown:'&', onHide:'&'},   
            link:function postLink(scope, element, attrs){

                $(element).modal({
                    show: false, 
                    keyboard: attrs.keyboard, 
                    backdrop: attrs.backdrop
                });

                scope.$watch(function(){return scope.visible;}, function(value){

                    if(value == true){
                        $(element).modal('show');
                    }else{
                        $(element).modal('hide');
                    }
                });

                $(element).on('shown.bs.modal', function(){
                  scope.$apply(function(){
                    scope.$parent[attrs.visible] = true;
                  });
                });

                $(element).on('shown.bs.modal', function(){
                  scope.$apply(function(){
                      scope.onSown({});
                  });
                });

                $(element).on('hidden.bs.modal', function(){
                  scope.$apply(function(){
                    scope.$parent[attrs.visible] = false;
                  });
                });

                $(element).on('hidden.bs.modal', function(){
                  scope.$apply(function(){
                      scope.onHide({});
                  });
                });
            }
        };
    }
);

myModalApp.directive('modalHeader', function(){
    return {
        template:'<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">{{title}}</h4></div>',
        replace:true,
        restrict: 'E',
        scope: {title:'@'}
    };
});

myModalApp.directive('modalBody', function(){
    return {
        template:'<div class="modal-body" ng-transclude></div>',
        replace:true,
        restrict: 'E',
        transclude: true
    };
});

myModalApp.directive('modalFooter', function(){
    return {
        template:'<div class="modal-footer" ng-transclude></div>',
        replace:true,
        restrict: 'E',
        transclude: true
    };
});

function ModalController($scope){
    $scope.title = "Angularjs Bootstrap Modal Directive Example";
    $scope.showModal1 = false;
    $scope.showModal2 = false;

    $scope.hide = function(m){
        if(m === 1){
            $scope.showModal1 = false;
        }else{
            $scope.showModal2 = false;
        }
    }

    $scope.modalOneShown = function(){
        console.log('model one shown');
    }

    $scope.modalOneHide = function(){
        console.log('model one hidden');
    }
}

Answer 3

与其他选项相比，下面给出了使用Angular Bootstrap和角度工厂的极简主义方法。请参阅下面的示例代码段。

可重复使用的模态视图 - ConfirmationBox.html

<div class="modal-header">
  <h3 class="modal-title">{{title}}</h3>
</div>
<div class="modal-body">
  {{message}}
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-primary btn-warn" data-ng-click="ok(); $event.stopPropagation()">OK</button>

  <button type="button" class="btn btn-default" data-ng-click="cancel(); $event.stopPropagation()">Cancel</button>
</div>

可重复使用的模块和共享工厂，用于处理可重复使用的模态对话框

angular.module('sharedmodule',['ui.bootstrap', 'ui.bootstrap.tpls'])
.factory("sharedService",["$q", "$modal", function ($q, $modal)
{
    var _showConfirmDialog = function (title, message)
    {
        var defer = $q.defer();

        var modalInstance = $modal.open({
            animation: true,
            size: "sm",
            templateUrl: 'ConfirmationBox.html',
            controller: function ($scope, $modalInstance)
            {
                $scope.title = title;
                $scope.message = message;

                $scope.ok = function ()
                {
                    modalInstance.close();
                    defer.resolve();
                };

                $scope.cancel = function ()
                {
                    $modalInstance.dismiss();
                    defer.reject();
                };
            }
        });

        return defer.promise;
    }

    return {

        showConfirmDialog: _showConfirmDialog
    };

}]);

您的视图的一部分，使用共享模式对话框

<a data-ng-click="showConfirm()">Go Back to previous page</a>

您的视图控制器，打开您的共享可重用模式对话框并处理通知（确定和取消）

var myModule = angular.module("mymodule", ['sharedmodule', 'ui.bootstrap', 'ui.bootstrap.tpls']);

myModule.controller('myController', ["$scope", "sharedService", "$window",
function ($scope, sharedService, $window)
{
    $scope.showConfirm = function ()
    {
        sharedService.showConfirmDialog(
            'Confirm!',
            'Any unsaved edit will be discarded. Are you sure to navigate back?')
            .then(function ()
            {
                $window.location = '#/';
            },
            function ()
            {
            });
    };
}]);

AngularJS可重用模态引导指令

3 个答案: