0
我目前正在試驗aframe.io並使用VR光標單擊按鈕並退出VR體驗。在Angular/Ionic父級指令中觸發DOM元素方法
我想要發生的情況是當光標單擊事件在盒子和紙板光標單擊指令上觸發 - 然後轉到vr-video-control指令，以便它可以執行exitVR（）方法在現場。我知道，從四處看看直接的DOM操作應該在'link'中完成，但公共可用的方法應該在'controller'中聲明 - 那麼如何在'controller'的方法中訪問'link'的$ element屬性？或者有沒有比這更好的方法？
現在我無法訪問鏈接到vr-video-control指令的場景元素來觸發任何方法。
我的HTML看起來像：
<a-scene vr-video-control>
<a-assets>
<video id="video" src="video/video4.mp4" autoplay loop crossorigin="anonymous"></video>
</a-assets>
<a-videosphere src="#video" rotation="0 180 0">
\t
<a-box id="videoLeftButton" cardboard-cursor-click cardboard-cursor-action="back" color="white" height="2" width="5" position="-7 0 10" rotation="0 -225 0"></a-box>
<a-box id="videoRightButton" cardboard-cursor-click cardboard-cursor-action="forward" color="white" height="2" width="5" position="7 0 10" rotation="0 -135 0"></a-box>
</a-videosphere>
</a-scene>當紙板光標點擊一個指令，它看起來像這樣
function CardboardCursorClick() {
return {
restrict: 'A',
require: '^^vrVideoControl',
scope: {
cardboardCursorAction: '@'
},
link: (scope, element, attrs, videoControl) => {
element.on('cursor-click',() => {
console.log("Cursor click " + scope.cardboardCursorAction);
videoControl.exitVR();
});
}
};
}
export default {
name: 'cardboardCursorClick',
fn: CardboardCursorClick
};並依賴於母公司指令VR-視頻控制：
function VRVideoControl() {
return {
restrict: 'AE',
scope: { item: '&' },
controller: ['$scope', function($scope) {
this.exitVR = function(cursorAction) {
//Trigger exitVR() on <a-scene>
}
}]
};
}
export default {
name: 'vrVideoControl',
fn: VRVideoControl
};