angularjs - 如何在有角度的场景中进行此调用？

Question

我正在使用一个名为 YTPlayer 的 youtube 播放器。 https://github.com/pupunzi/jquery.mb.YTPlayer

在这段代码中，他进行了一个运行良好的 JQuery 调用。

$(document).ready(function () {
    $(".player").mb_YTPlayer();
});

如何在不使用 JQuery 的情况下从我的控制器进行这样的调用？

谢谢。

Answer 1

您创建一个指令。您可以将指令视为扩展 html。

您的指令将如下所示：

.directive('ytPlayer', function() {
   return {
       scope: {
           pathToVideo: '&'
       },
       link(scope, element, attr) {
            //at this point, the DOM is ready and the element has been added to the page.  It's safe to call mb_YTPlayer() here.
            //also, element is already a jQuery object, so you don't need to wrap it in $()
            element.mb_YTPlayer();

            //scope.pathToVideo() will return '/video.mpg' here

       }
   }
}

您将使用以下标记将其添加到您的页面中：

<yt-player path-to-video="/video.mpg"></yt-player>

如果您的视频播放器依赖于它，则可以在指令中使用 jQuery。您永远不需要在角度控制器中使用 jQuery。如果您发现自己这样做了，那么您就不是在“思考角度”。

很多时候，视频播放器和其他组件需要特定的标记才能工作，因此您可以使用模板属性为指令自定义模板：

.directive('ytPlayer', function() {
   return {
       scope: {
           pathToVideo: '&'
       },
       replace: true,
       template: '<div><span></span></div>'
       link(scope, element, attr) {

            element.mb_YTPlayer();

            //scope.pathToVideo() will return '/video.mpg' here

       }
   }
}

这两行：

replace: true,
template: '<div><span></span></div>'

将导致 Angular 用模板属性中的标记替换 yt-player 标记。