Angular中的getElementById等价吗？

我正在将一些我的html/javascript页面移动到AngularJS。以前，我的脚本（HTML5的音频播放器），在网页上呈现一些HTML元素，然后进行了一些脚本，以使用这些元素，正是如此：Angular中的getElementById等价吗？

audioplayer.html：

... 
<div id="timeline"> 

     <div id="showElapsed"> 

      <div class="bg"> 

      </div> 

      </div> 
     <div id="playhead"></div> 
    </div> 
... 

<script> 
     var playhead = document.getElementById('playhead'); // playhead 

     var timeline = document.getElementById('timeline'); // timeline 

     // timeline width adjusted for playhead 
     var timelineWidth = timeline.offsetWidth - playhead.offsetWidth; 
    ...

现在我喜欢将其移动到角度控制器/视图布局中，所以;

的index.html

... 
<div ng-controller="AudioPlayerController"> 
      <div ng-include="'views/audioPlayerView.html'"></div> 
     </div> 
...

main.js

... 
function AudioPlayerController($scope) { 

     var playhead = document.getElementById('playhead'); // playhead 

     var timeline = document.getElementById('timeline'); // timeline 
     // timeline width adjusted for playhead 
     var timelineWidth = timeline.offsetWidth - playhead.offsetWidth; 
...

audioPlayerView.html：

... 
<div id="timeline"> 

     <div id="showElapsed"> 

      <div class="bg"> 

      </div> 

      </div> 
     <div id="playhead"></div> 
    </div> 
...

现在我有一个亲blem - document.getElementById('timeline');不会返回任何内容，因为它已移至控制器。此外，控制器在视图之前调用，那么控制器如何从视图引用元素？

我意识到这是基本的角度布局的东西，但我无法弄清楚。请有人帮助我以更有角度的方式思考！？谢谢。

来源

2016-09-26 Leon

如果你在Angular中使用DOM，你应该使用[directive]（https://docs.angularjs.org/guide/directive） –

这个不是你如何使用角度，angular是为单页面应用程序构建的，它使用[routing]（http://www.w3schools.com/angular/angular_routing.asp）在需要时加载页面。 – Cyclotron3x3

音频播放器是所有路由通用的，所以试图将其添加到索引页面，但UI路由器解决方案也适用于我... – Leon

对于角度中的dom交互，您在视图中实现了指令元素。指令链接还包括在视图加载后编译，因此这里没有问题。

注意它们的声明都写在骆驼的看法，所以：

的javascript：

angular.module('myApp') 
    .directive('audioPlayer', function() { 
     return { 
      restrict: 'A', 
      template: 'path-to-your-page/audioPlayerView.html', 
      link: function(element) { 
       var playhead = element.find('playhead'); 

       // timeline width adjusted for playhead 
       var timelineWidth = element.offsetWidth - playhead.offsetWidth; 
      } 
     }; 
    });

HTML：

<div audio-player> 
      <div id="showElapsed"> 

       <div class="bg"> 

       </div> 

       </div> 
      <div id="playhead"></div> 
</div>

注意，在“角度的方式“你不应该使 document.getElementB yId（），只是==> angular.element（）

来源

2016-09-26 11:54:59 Tal

Angular中的getElementById等价吗？

回答

相关问题