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等價嗎？

回答

相關問題