Angularjs确认模态为带操作指令

时间:2018-10-01 14:15:03

标签: angularjs angularjs-directive angularjs-scope

我想创建angularjs指令mydialog wihc触发模态。一旦打开模型,我将拥有标题和内容,可以取消并确认。一旦用户单击确认相应的动作即save应该触发。这里的save动作是在MainCtrl中。如何触发它。

HTML指令:

 <my-dialog newmodal="alertModel"  ></my-dialog>

ConfirmationDailog.html代码:

<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" ng-click="$hide()">&times;</button>
        <h4 class="modal-title">{{alertModel.Title}}</h4>
    </div>
    <div class="modal-body">
        {{alertModel.Message}}
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" ng-click="cancel()">Cancel</button>
        <button type="button" class="btn btn-danger" ng-click="executeDialogAction(alertModel.action)">Confirm</button>
    </div>
</div>

下面是JS部分:

  var app = angular.module('plunker', ['ui.bootstrap']);



app.controller('MainCtrl', ['$scope', '$uibModal',
       function ($scope,$uibModal) {
        $scope.name = 'World';
        var alertModel = {};
        alertModel.Title = "My Title";
        alertModel.Message = "The Conent";
        alertModel.action= "save";
        $scope.alertModel = alertModel;           

        $scope.save= function () {
            alert('from outside');
        }


    }]);

触发模型的我的对话框指令

app.directive('myDialog', [
                        function () {
                            return {
                                scope: {
                                    mymodal: '=newmodal',

                                },
      template: "<button class='btn btn-danger' ng-lick='open(mymodal)'>Open Modal</button>",
                                controller: ModalController                                    

                            };
                        }]);

        function ModalController($uibModal, $log, $scope) {
            $scope.animationsEnabled = true;   

            $scope.open = function (alertModel) {
                var modalInstance = $uibModal.open({
                    animation: $scope.animationsEnabled,
                    templateUrl: 'ConfirmationDailog.html',
                    controller: ModalInstanceCtrl,
                    scope:$scope,
                        resolve: {
                    test: function () {
                        return alertModel;
                    }
            },
                    size: 'lg'                                  
                });
                modalInstance.result.then(function (selectedItem) {
                    console.log("Confirmed: " + selectedItem);
                    $scope.selectedItem = selectedItem;
                }, function () {
                    $log.info('modal dismissed at: ' + new Date());
                });
            };
        }


        function ModalInstanceCtrl($scope, $uibModalInstance, test) {
            console.log('in');
            $scope.alertModel = test;
            $scope.cancel = function () {
                $scope.$dismiss();
            }

            $scope.executeDialogAction = function (action) {
                if (typeof $scope[action] === "function") {
                    $scope[action]();
                }
            };
        }

0 个答案:

没有答案