Question

我有一个离子弹出窗口，里面有一个文本字段和一个按钮。我想按Enter键并希望按钮工作并关闭弹出窗口。我想知道如何在下面的弹出窗口中执行此操作。

<!DOCTYPE html>

<html>

<head>
    <title>SO code</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js"></script>
    <style>
          html,body{
		  height:100%;
		  width:100%;
		  padding:0px;
		  margin:0px;
		}
		#content{
		  width:100%;
		  height:100%;
		  position:relative;
		}
		#box{
		  position:absolute;
		  background:orange;
		  height:100px;
		  width:100px;
		  bottom:100px;
		  right:100px;
		}
    </style>
    </head>
	<body>
	<div id="content">
	  <div id="box"></div>
	</div>
<script>
	function Terrain(){

	  this.container = document.getElementById('content');
	  this.camera;
	  this.scene; 
	  this.renderer;
	  this.light;

	  this.computeZ = function(meshHandle, cameraHandle, faceHeight, targetHeight){
	  	var face = meshHandle.geometry.vertices[2]
			var vFOV = cameraHandle.fov * Math.PI / 180;  
			var vHeightPartial = 2 * Math.tan( vFOV / 2 );
			var p1 = faceHeight * window.innerHeight;
			var p2 = face.z * vHeightPartial;
			var p3 = targetHeight * vHeightPartial;
			var p4 = targetHeight * p2;
			var p5 = p1 + p4;
			var z = p5/p3;
      
			//calculate dom element center coordinate
			var screenPositionX = 0;
			var screenPositionY = 0;
			var div = document.getElementById('box');
			var divDim = div.getBoundingClientRect();
			screenPositionX = (divDim.left + divDim.right) / 2;
			screenPositionY = (divDim.bottom + divDim.top) / 2;
			var vector = new THREE.Vector3((screenPositionX / window.innerWidth) * 2 -1, (screenPositionY / window.innerHeight) * 2 -1, 0.5);
    //unproject camera
			vector = vector.unproject(this.camera);
			var distanceZ = this.camera.position.z - vector.z ;
			var offsetX = vector.x * (z-10) / distanceZ;
			var offsetY = vector.y * (z-10) / distanceZ;
			var cameraPosition = new THREE.Vector3(offsetX,offsetY,z);
			return cameraPosition;
		}
	  
		this.computeX = function(meshHandle, cameraHandle, faceHeight, targetWidth){
	  	var div = document.getElementById('box');
			var divDim = div.getBoundingClientRect();
			var y =  ((divDim.left + (targetWidth/2)) / window.innerHeight ) * 2 + 1;
			return y;
	  }
	  
	  this.computeY = function(meshHandle, cameraHandle, faceHeight, targetHeight){
			var div = document.getElementById('box');
			var divDim = div.getBoundingClientRect();
			var y =  ((divDim.top + (targetHeight/2)) / window.innerHeight ) * 2 + 1;
			return y;
	  }
	  this.onDocumentClick = function(event)
	  {
	  			var vector = new THREE.Vector3(( event.clientX / (window.innerWidth) ) * 2 - 1, -( event.clientY / window.innerHeight ) * 2 + 1, 0.5);
                vector = vector.unproject(this.camera);

                console.log(vector);
	  }
	  this.init();
	}

	Terrain.prototype.init = function () {

		this.camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
		this.scene = new THREE.Scene();

		this.geometry = new THREE.BoxGeometry(20, 20, 20);
		this.material = new THREE.MeshPhongMaterial();
		this.mesh = new THREE.Mesh( this.geometry, this.material );
		this.scene.add( this.mesh );
		
		var ambient = new THREE.AmbientLight( 0x00ff00, 0.5 );
		this.scene.add( ambient );

		this.renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
		this.renderer.setPixelRatio( window.devicePixelRatio );
		this.renderer.setSize( window.innerWidth, window.innerHeight );
		this.container.appendChild(this.renderer.domElement );
	  
		window.animations['terrain'] = this.animate.bind(this);
		window.addEventListener( 'resize', this.onWindowResize.bind(this), false );
		document.addEventListener('click',this.onDocumentClick.bind(this), false);
	}

	Terrain.prototype.onWindowResize = function(){
		this.renderer.setSize( window.innerWidth, window.innerHeight );
	  this.camera.aspect = window.innerWidth / window.innerHeight;
	  this.camera.updateProjectionMatrix();
	}

	Terrain.prototype.animate = function(){
	  	//this.camera.position.x = this.computeX(this.mesh, this.camera, 20, 100);
	  //this.camera.position.y = this.computeY(this.mesh, this.camera, 20, 100);
	  this.renderer.render( this.scene, this.camera );
	}

	function animate(){
	  for(var i in window.animations){
	    window.animations[i]();
	  };
	  window.requestAnimationFrame(animate);
	}

	window.animations = {};
	var terrain = new Terrain();
	window.requestAnimationFrame(animate);
	var newPosition = terrain.computeZ(terrain.mesh,terrain.camera,20,100);
	terrain.camera.position.x -= newPosition.x;
	terrain.camera.position.y += newPosition.y;
	terrain.camera.position.z += newPosition.z;
</script>
</body>
</html>

Answer 1

我建议您使用<form>并设置按钮type="submit"：

<form ng-submit="submitPopup()">
    <button type="submit">Close</button>
</form>

在submitPopup函数中，执行任何操作并关闭模式：

$scope.submitPopup = function() {
    $http.get( ... );
    myPopup.close();
}

Answer 2

您可能已经过滤了按钮事件。

if（e.name =＆＃34;＆＃34;） - ＆gt;

是$ http.get工作吗？

按Enter键以使用AngularJs在Ionic Popup中提交

2 个答案: