AngularJS可重用模态引导指令

我是AngularJS的新手.我正在尝试实现可重用的模态Bootstrap.
这是index.html:

    
    Launch Demo Modal

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

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模板:

    

        

            

                ×
                
{{header}}
            
            


                
{{body}}

            
            


                
{{footer}}

                Close
                Save changes

            
        
    

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

我建议你不要绑定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

另一个小问题:

partialmodal.html:

更改,到;

Launch Alert

如果有人仍然感兴趣,这里有一个我最近使用bootstrap modal和angularjs指令的例子.

HTML:

    
        
        
            
This is modal body
        
        
            Save
        
    

JavaScript的:

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

myModalApp.directive('modal', function(){
        return {
            template: '
×
Modal title
', 
            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:'
×
{{title}}
',
        replace:true,
        restrict: 'E',
        scope: {title:'@'}
    };
});

myModalApp.directive('modalBody', function(){
    return {
        template:'
',
        replace:true,
        restrict: 'E',
        transclude: true
    };
});

myModalApp.directive('modalFooter', function(){
    return {
        template:'
',
        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');
    }
}

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

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

  
{{title}}


  {{message}}


  OK

  Cancel