Question

我需要在不同的页面上显示一个确认框。所以我决定创建一个自定义指令来执行此任务。我有一个确认框的html模板。这个模板中有两个按钮和一些文本。一个按钮用于取消对话框，一个按钮用于提交对话框。因此，当我们点击提交按钮时，每个页面的功能都会有所不同。关于这个问题，我有几个问题。

如何创建这种指令以在某种条件下显示对话框？
如何将文本从我的控制器传递到此模板？
如何覆盖＆＃34;提交＆＃34;按钮功能。

Answer 1

我有类似的要求，我希望自定义模式弹出窗口提醒用户继续执行删除，修改等操作。所以我写了一个自定义指令。下面是代码。

(function(){
'use strict';

angular.module('mainApp').directive('confirm', ['$log','$uibModal', function($log,$uibModal){
    var link = function($scope,elem,attr){
        elem.bind('click',function(){
            var modalInstance = $uibModal.open({
                  animation: true,
                  templateUrl: 'templates/shared/_confirm_modal.html',
                  controller: 'confirmDirectiveCtrl',
                  size: 'sm'
                  ,backdrop: 'static' //disables modal closing by click on the backdrop.
                  ,resolve: {
                    requiredVerbose: function(){
                        var requiredVerbose = {
                            modalTitle  : attr.modalTitle
                            ,message    : attr.message
                            ,confirmVerbose :   attr.confirmVerbose
                            ,cancelVerbose  :   attr.cancelVerbose
                        } ;
                        return requiredVerbose;
                    }
                  }
            });

            modalInstance.result.then(function(){
                $scope.confirmFn();
                }, function(){
                if($scope.cancelFn){
                    $scope.cancelFn();
                }
            });
        });
    }
    return{
        restrict    :   'A'
        ,scope : {
            confirmFn : '&'
            ,cancelFn  : '&'
        }
        ,compile : function compile(elem,attr){
            if(attr.confirmType && attr.confirmType=='delete')
            {
                attr.modalTitle = 'Warning';
                attr.confirmVerbose = 'Delete';
                attr.cancelVerbose = 'No';
                attr.message = 'Are you sure, you want to delete?'
            }
            else{
                if(!attr.modalTitle){attr.modalTitle = 'Warning'}
                if(!attr.confirmVerbose){attr.confirmVerbose = 'Ok'}
                if(!attr.cancelVerbose){attr.cancelVerbose = 'cancel'}
                if(!attr.message){attr.message = 'Are you sure?'}
            }

            return{
                post : link
            }
        }
    }
}]);

angular.module('mainApp').controller('confirmDirectiveCtrl', ['$scope','$uibModalInstance','requiredVerbose',
    function($scope,$uibModalInstance, requiredVerbose){

    $scope.modalTitle= requiredVerbose.modalTitle;
    $scope.message = requiredVerbose.message;
    $scope.confirmVerbose = requiredVerbose.confirmVerbose;
    $scope.cancelVerbose= requiredVerbose.cancelVerbose;


    $scope.ok = function(){
        $uibModalInstance.close($scope.timeline);
    };

    $scope.cancel = function(){
        $uibModalInstance.dismiss();
    };
}]);

}());

回答你的问题，

这是属性类型指令。并且添加此指令标记的元素绑定到onclick函数，该函数生成所需的弹出窗口。
如何传递文字？您可以通过属性传递所需的文本。我希望这个指令只适用于两种警报，因此只有两组不同的文本。如果您每次都想要自定义文本，可以通过attrs将它们传递给指令。
如何覆盖提交功能？您可以将自定义提交和取消传递给此指令，并将它们绑定到弹出提交和取消功能。上面的代码也是一样的。

编辑： HTML模板和说明：

下面是一个描述如何使用此指令的示例。

<i class="fa fa-trash-o" 
   confirm
   confirm-fn="deletePlaylist($index)"
   confirm-type="delete">
</i>

上述模板是垃圾桶图标。属性是

指令名称：确认
confirm-fn：用户选择ok / submit等后应调用的函数..
confirm-type：此属性定义您要显示的弹出窗口类型。在我的情况下，我经常使用'删除'类型，因此编写了与之相关的所需详细信息。默认情况下，我已经定义了详细（标题，消息，确定按钮，取消按钮）。

如果您希望自定义消息将其添加到属性中。以下是一个这样的例子。

<i class="fa fa-trash-o" 
   confirm
   confirm-fn="doingGreatFn()"
   cancel-fn="justFineFn()"
   modal-title="My Modal"
   message="How are you doing?"
   confirm-verbose="Great"
   cancel-verbose="Just Fine">
</i>

我希望，这有助于

Answer 2

您可以创建如下指令来处理提交和提交在任何页面取消任何控制器中的不同功能。我已创建了一个独立的范围指令，但您可以通过创建子范围scope : true;或bindToController:true（特定于控制器）来根据需要对其进行更改

    app.directive('confirm', ['$log', '$modal' ,'$parse','$timeout','factory', function($log, $modal,$parse,$timeout,factory) {
        return {
            restrict: 'E',
            template:'<button type="button" class="btn form-btn" '+
                    'ng-click="openModal()" ng-disabled="disable" >'+
                    '{{buttonName}}</button>',
            replace: true,
            transclude: false,
            scope: {
                name :'=name', //can set button name ..basically u can send a text 
               disable :'=disable' //set as an attribute in HTML to disable button
              },
              link: function ($scope, element, attrs) {

             $scope.buttonName = $scope.name;
             $scope.openModal= function() {

                  $scope.modal = $modal.open({
                      templateUrl: 'customConfirmModal.html',
                      scope:$scope,
                      persist: true,
                      backdrop: 'static'
                  });
              };
             $scope.cancel = function(){
              $scope.modal.dismiss();
             };
             $scope.submit= function(){
              factory.customSubmitCall($scope);//call the factory method which will call different functions depending on the need..
             };
    }

创建一个工厂以包含不同的功能，可以通过注入工厂在任何控制器上调用。

app.factory('factory', ['$http','$rootScope','$filter',function($http,$rootScope,$filter){

 factory.customSubmitCall = function ($scope){
    if($rootScope.page ==1){ //check on which page you are performing action
         $scope.pageOneSubmit(); //page specific function in that controller..
    }else{
          $scope.submit();
    }
};
    return factory;
}]);

在您的HTML中

<confirm name="Confirm" disable="disable"> </confirm>

如何使用Angular JS使用对话框模板制作自定义指令？

2 个答案: