Angularjs 角度UI模式显示第二次打开的内容,而不是第一次打开的内容
我有一个角度用户界面模式,加载一个3.js场景。我的模态打开,但是,直到我关闭模态并再次打开它,场景才会渲染。之后,场景将在模式中显示,直到我关闭浏览器为止。我确信这与我调用函数的方式有关,也许我需要一个小的超时。但是,我更愿意避免超时,只需确保呈现我的“框”的函数在打开模式后发生 这是我的模式模板:Angularjs 角度UI模式显示第二次打开的内容,而不是第一次打开的内容,angularjs,three.js,angular-ui-bootstrap,Angularjs,Three.js,Angular Ui Bootstrap,我有一个角度用户界面模式,加载一个3.js场景。我的模态打开,但是,直到我关闭模态并再次打开它,场景才会渲染。之后,场景将在模式中显示,直到我关闭浏览器为止。我确信这与我调用函数的方式有关,也许我需要一个小的超时。但是,我更愿意避免超时,只需确保呈现我的“框”的函数在打开模式后发生 这是我的模式模板: <div class="modal-header"> <h3 class="modal-title">Box Preview</h3> </div
<div class="modal-header">
<h3 class="modal-title">Box Preview</h3>
</div>
<div class="modal-body">
<div id="webGL-container" width="500px">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-ng-click="ok()">Close</button>
</div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Box Preview</h3>
</div>
<div class="modal-body">
<div id="webGL-container" width="500px">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-ng-click="ok()">Close</button>
</div>
</script>
以下是我关闭模式的模式依赖项:
appControllers.controller('ModalInstanceCtrl', ['$scope', '$modalInstance', function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]);
以下是我的three.js代码:
var scene;
var camera;
var renderer;
var box;
var controls;
var newtexture;
// 3D OBJECT - Generate
function generate3D() {
//Instantiate a Collada loader
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load('https://myblob.net/dae.dae', function (collada) {
box = collada.scene;
box.traverse(function (child) {
if (child instanceof THREE.SkinnedMesh) {
var animation = new THREE.Animation(child, child.geometry.animation);
animation.play();
}
});
box.scale.x = box.scale.y = box.scale.z = .2;
box.updateMatrix();
init();
animate();
});
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xdddddd);
//renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setSize(500, 500);
// Load the box file
scene.add(box);
// Lighting
var light = new THREE.AmbientLight();
scene.add(light);
// Camera
camera.position.x = 40;
camera.position.y = 40;
camera.position.z = 40;
camera.lookAt(scene.position);
// Rotation Controls
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.rotateSpeed = 5.0;
controls.zoomSpeed = 5;
controls.noZoom = false;
controls.noPan = false;
$("#webGL-container").append(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
}
更新1:我注意到,当我不使用外部模板,而是按如下方式创建模板时,它会加载。我更喜欢使用外部模板:
<div class="modal-header">
<h3 class="modal-title">Box Preview</h3>
</div>
<div class="modal-body">
<div id="webGL-container" width="500px">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-ng-click="ok()">Close</button>
</div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Box Preview</h3>
</div>
<div class="modal-body">
<div id="webGL-container" width="500px">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-ng-click="ok()">Close</button>
</div>
</script>
方框预览
关
解决了这个问题。我将我的3D盒子生成代码移动到一个专用控制器中,并将其从加载到模式的模板中调用,如下所示:
<div class="modal-header">
<h3 class="modal-title">Box Preview</h3>
</div>
<div class="modal-body" data-ng-controller="appBoxDisplayCtrl">
<div id="webGL-container" width="500px">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-ng-click="ok()">Close</button>
</div>
方框预览
关
您需要调用generate3D();来自ModalInstanceCtrlHello。你能把生成的3D文件发出去吗?听起来好像有东西在异步运行,而您没有处理它。@AliAdravi-我如何跨控制器调用该函数?