angularjs - Angularjs 确认模式作为带有动作的指令

Question

我想创建 angularjs 指令 mydialog wihc 触发模态。一旦模型打开，我将有标题和内容，okcancel 并确认。一旦用户单击确认相应的操作，即保存应该触发。这里保存操作在 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]();
                }
            };
        }

标签： angularjsangularjs-directiveangularjs-scope