在Angular JS中调用hide后,弹出窗口也没有关闭

时间:2018-01-11 09:17:15

标签: angularjs ajax angular-material

这是我的功能

(function(){
             'use strict';
       function TablePopUpController($http, prod, tableName, $mdDialog, $scope,$timeout,$location) {
             $scope.tableName=tableName;
             var datas=[];
             //$location.reload();
             $scope.submitData = function() {
                    if (tableName == 'WFSmartPriority') {
                           var url = prod.TrfUrl + "/GetWFSmartPriority?tableName="
                                        + tableName + "&OrgID=" + $scope.OrgID+"&"+prod.TrfApiKey+"&callback=JSON_CALLBACK";
                           $http.jsonp(url).success(function(data) {
                                 datas=data.GetWFSmartPriorityResult;
                           //     console.log(datas);


                                 hideData(datas);// Calling function to hide pop ip 


                           });

                    } else {
                           if($scope.market==undefined)
                                 $scope.market=' ';
                           if($scope.OrgID==undefined)
                                 $scope.OrgID=0;
                           if($scope.userGroupID==undefined)
                                 $scope.userGroupID=0;
                           var url = prod.TrfUrl
                                        + "/GetWFMarketOrgUserGroup?tableName=" + tableName
                                        + "&OrgID=" + $scope.OrgID + "&Market="
                                        + $scope.market + "&UserGroupID="
                                        + $scope.userGroupID+"&"+prod.TrfApiKey+"&callback=JSON_CALLBACK";
                           $http.jsonp(url).success(function(data) {
                                 datas=data.GetWFMarketOrgUserGroupResult;
                                 console.log(datas);
                                 hideData(datas);
                           });
                    }

             }


             function hideData(data){
                    //$mdDialog.cancel(data);
$mdDialog.hide(data);
                    console.log('after hide');


             }

       }
             angular.module('celeritas').controller(
             'TablePopUpController',['$http', 'prod', 'tableName', '$mdDialog', '$scope','$timeout','$location',TablePopUpController]
             )
})();

在ajax成功之后,我正在调用$mdDialog.hide(data);但是它也没有关闭弹出窗口。

当我刷新并做某事时,它会第二次关闭。 我不知道我错过了什么。

我调试了所有看起来都很好。我也获得了数据值,但它确实关闭了弹出窗口。

1 个答案:

答案 0 :(得分:0)

我尝试了你给出的解决方案并且工作正常可能还有其他原因导致对话框无法关闭。



angular.module('dialogDemo1', ['ngMaterial'])

.controller('AppCtrl', function($scope, $mdDialog, $http) {
	$scope.showAlert = function(ev) {
		$mdDialog.show({
			controller: DialogController,
			templateUrl: 'dialog.tmpl.html',
			parent: angular.element(document.body),
			targetEvent: ev,
			fullscreen: $scope.customFullscreen // Only for -xs, -sm breakpoints.
		});
	};
  
  
	function hideData(data){
		$mdDialog.hide();
		console.log('after hide');
	}

	function DialogController($scope, $mdDialog) {
		$scope.hide = function() {
			$mdDialog.hide();
		};

		$scope.submitData = function(answer) {
			var url = "https://fiddle.jshell.net/echo/jsonp/?callback=JSON_CALLBACK&data={%22foo%22:%22aaa%22}";
			console.log(answer);
			$http.jsonp(url).success(function(json) {
				console.log(json);
				hideData(json);// Calling function to hide pop ip 
			});
		}
	}
});

<html ng-app="dialogDemo1">
  <head>
    <link href="https://rawgit.com/angular/bower-material/master/angular-material.css" rel="stylesheet"/>
  </head>
  <body>
		<div ng-controller="AppCtrl" class="md-padding" id="popupContainer" ng-cloak>
		  <div class="dialog-demo-content" layout="row" layout-wrap layout-margin layout-align="center">
			<md-button class="md-primary md-raised" ng-click="showAlert($event)"   >
				Alert Dialog
			</md-button>
		  </div>
		</div>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-animate.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-aria.js"></script>
		<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
		<script type="text/ng-template" id="dialog.tmpl.html">
			<md-dialog aria-label="Mango (Fruit)">
				<form ng-cloak>
					<md-toolbar>
						<div class="md-toolbar-tools">
							<h2>Mango (Fruit)</h2>
							<span flex></span>
							<md-button class="md-icon-button" ng-click="cancel()">
								<md-icon aria-label="Close dialog">Click me</md-icon>
							</md-button>
						</div>
					</md-toolbar>

					<md-dialog-content>
						<div class="md-dialog-content">
							<h2>Using .md-dialog-content class that sets the padding as the spec</h2>
							<p>
								The mango is a juicy stone fruit belonging to the genus Mangifera, consisting of numerous tropical fruiting trees, cultivated mostly for edible fruit. The majority of these species are found in nature as wild mangoes. They all belong to the flowering plant family Anacardiaceae. The mango is native to South and Southeast Asia, from where it has been distributed worldwide to become one of the most cultivated fruits in the tropics.
							</p>
							<p>
								The highest concentration of Mangifera genus is in the western part of Malesia (Sumatra, Java and Borneo) and in Burma and India. While other Mangifera species (e.g. horse mango, M. foetida) are also grown on a more localized basis, Mangifera indica&mdash;the "common mango" or "Indian mango"&mdash;is the only mango tree commonly cultivated in many tropical and subtropical regions.
							</p>
							<p>
								It originated in Indian subcontinent (present day India and Pakistan) and Burma. It is the national fruit of India, Pakistan, and the Philippines, and the national tree of Bangladesh. In several cultures, its fruit and leaves are ritually used as floral decorations at weddings, public celebrations, and religious ceremonies.
							</p>
						</div>
					</md-dialog-content>

					<md-dialog-actions layout="row">
						<md-button ng-click="submitData('not useful')">
							Not Useful
						</md-button>
						<md-button ng-click="submitData('useful')">
							Useful
						</md-button>
					</md-dialog-actions>
				</form>
			</md-dialog>
		</script>
  </body>
</html>
&#13;
&#13;
&#13;