zoukankan      html  css  js  c++  java
  • 使用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'

    });

    });
    }
    }
    }])


  • 相关阅读:
    随机生成30道四则运算题目
    《构建之法》阅读笔记01
    第一周学习进度
    个人介绍
    MyBatis(登录)
    MyBatis
    动态网页
    网页基本标签
    Servlet基础
    JSP数据交互
  • 原文地址:https://www.cnblogs.com/alvin-perfect/p/4917022.html
Copyright © 2011-2022 走看看