Question

我正在将我的一些html / javascript页面移到AngularJS上。以前，我的脚本（HTML5音频播放器）在页面上呈现了一些HTML元素，然后运行了一些脚本来使用这些元素，因此：

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>
...

现在我遇到了问题 - document.getElementById('timeline');没有返回任何内容，因为它已移至控制器。此外，控制器在视图之前被调用，那么控制器如何从视图中引用元素？

我意识到这是基本的Angular布局，但我无法弄明白。有人可以帮助我以更有棱角的方式思考！？谢谢。

Answer 1

对于角度中的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>

请注意，在＆＃34;角度方式＆＃34;你不应该做 document.getElementById（），只是==＆gt; angular.element（）

Angular中等效的getElementById？

1 个答案: