使用angular中自定义的directive实现删除确认框

我的删除情况，可单独删除一条任务，也可以根据类别删除(类别和所属此类别的任务集合)。

首先页面

   task.ng.html

   <span ng-click="remove(task)" confirm><span class="glyphicon glyphicon-trash icon" ></span></span>

TaskController

$scope.ok = function (task) {
    $scope.tasks.remove(task);
};

Type.ng.html

<span class="glyphicon glyphicon-trash typeedit"  ng-if="type.showIcon" confirm style="margin-right: 5px;z-index: 5;">

TypeController

$scope.ok = function(type){

   /*removetasksService is inject service */

    removetasksService.removetasksbyType(type._id);  

    $scope.types.remove(type);
};

directive.js:

angular.module('demoOne').directive('confirm',['$modal',function($modal) {

    return {
        restrict: 'A',
        scope:true,
        link:function(scope, element, attrs){

            element.bind("click", function() {
               //ConfirmService.open(attrs.confirm);
                var modalConfirmInstance = $modal.open({
                    templateUrl: 'client/tasks/views/myDeleteConfirm.ng.html',
                    controller:['$scope','$modalInstance', function($scope,$modalConfirmInstance){

                        //get obj from parent Controller
                        if(scope.task!=null){
                            $scope.obj = scope.task;
                        }else{
                            $scope.obj = scope.type;
                        }

$scope 是此控制器作用域对象 ，而 scope是继承了父作用域对象从而创建一个新的作用于对象，可以访问父类中的方法和属性

                        $scope.determine = function (obj) {
                            scope.ok(obj);   //run the parent controller method
                            $modalConfirmInstance.close(true);
                        };

                        $scope.cancel = function () {
                            $modalConfirmInstance.dismiss('cancel');
                        };
                    }],
                    size:'md'

                });

            });
        }
    }
}])

转载于:https://www.cnblogs.com/alvin-perfect/p/4917022.html