ng-dialog可拖拽

前端之家收集整理的这篇文章主要介绍了ng-dialog可拖拽前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
需要jquery-ui.js jquery-2.1.4.js
<script type="text/javascript" src="${pageContext.request.contextPath}/js/libs/jquery/jquery-ui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/libs/ngdialog/js/ngDialog.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/libs/jquery/jquery-2.1.4.js"></script>

var mockall = angular.module("mockall",[ 'ngDialog','ngRoute']);

mockall.config(function ($routeProvider) {
    $routeProvider.when("/index",{
        templateUrl: contextPath+"/templates/index.html",controller: "index"
    }).otherwise("/index");
});

mockall.controller("index",function ($scope,$http,ngDialog) {
    var dubboList = [];
    var restList = [];
    $scope.editRest = function(index){
    	var isEdit = false;
    	var old_url = "";
        if(typeof index != 'undefined'){
            isEdit = true;
            old_url = restList[index].url;
        }
        ngDialog.editor({
            template:contextPath+"/templates/rest-edit.html",title:isEdit ? "编辑" :"新增",controller:['$scope',function($scope){
            	$scope.obj = {};
                if(isEdit){
                    $scope.obj = restList[index];
                    $scope.obj.old_url = old_url;
                }else{
                	$scope.obj.restMethod = "post";
                }
                $scope.requestHeadersTip = false;
                $scope.requestTip = false;
                $scope.responseHeadersTip = false;
                $scope.responseTip = false;
                $scope.submit = function(){
                	if(!($scope.requestHeadersTip && $scope.requestTip
                			&& $scope.responseHeadersTip && $scope.responseTip)){
                		return;
                	}
                    console.log(JSON.stringify($scope.obj));
                    $http({
                        url: "conf/put_rest",method: "POST",data: JSON.stringify($scope.obj),cache: false
                    }).success(function(data) {
                    	$scope.closeThisDialog();
                        $scope.obj = data;
                        if(data.code == 0){
                        	alert(isEdit ? "更新成功!" :"保存成功!");
                        	queryList("","1",1);
                        }
                    });

                };
                
                $scope.cancel = function(){
                    $scope.closeThisDialog();
                };
                
                validatorJson = function(jsonStr,name){
                    $http({
                        url: "conf/validator",data: {"jsonStr":jsonStr.value},cache: false
                    }).success(function(data) {
                    	if(data == false){
                    		changeTip(name,true);
                    	}else{
                    		changeTip(name,false);
                    	}
                    });
                    
                };
                
                changeTip = function(name,value){
                	if(name == "requestHeadersTip"){
                		$scope.requestHeadersTip = value;
                	}
                	if(name == "requestTip"){
                		$scope.requestTip = value;
                	}
                	if(name == "responseHeadersTip"){
                		$scope.responseHeadersTip = value;
                	}
                	if(name == "responseTip"){
                		$scope.responseTip = value;
                	}
                }
            }]
        })
    };
    

   

});


然后在rest-edit.html中
<script>
	$(function() {
	    $(".panel").draggable();
  	});
</script>
.panel是div的class

猜你在找的Angularjs相关文章