在Angular / Ionic的父指令上触发DOM元素方法

Triggering DOM element method on parent directive in Angular / Ionic

本文关键字：DOM 元素 方法 指令 Angular Ionic      更新时间：2023-09-26

我正在尝试使用框架。使用VR光标点击按钮，退出VR体验。

我想要发生的是当光标点击事件在盒子和纸板上被触发时，然后转到vr-video-control指令，这样它就可以在场景中执行exitVR()方法。我知道直接DOM操作应该在"链接"中完成，但公开可用的方法应该在"控制器"中声明-所以你如何在"控制器"的方法中访问"链接"的$element属性?或者有比这更好的方法吗?

现在我不能访问链接到vr-video-control指令的scene元素来触发任何方法。

我的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">
          	
        <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>

其中cardboard-cursor-click是一个指令，看起来像这样

 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-video-control:

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
};

通过使用指令中的作用域，我意识到我可以将方法公开暴露给其他控制器，同时在链接方法中保持DOM操作。我还是Angular的新手，所以不确定这是不是最好的方法?

return {
    restrict: 'A',
    controller: ['$scope', function($scope) {
      this.exitVR = function(cursorAction) {
        $scope.exitVR(cursorAction);
      };
    }],
    link: (scope, element, attrs) => {
      scope.exitVR = function(cursorAction) {
        var rawElement = angular.element(element)[0]
        rawElement.exitVR();
      };
    }
  };

相关文章：