Question

我对角度和javascript相对较新，所以如果我听起来很愚蠢，请接受我的道歉。

我正在尝试将主题融入角度。我注意到如果我将整个代码包含到index.html中，那么网站就可以工作，但是当我将代码转移到控制器并通过<div ui-view></div>调用它们时，渲染的页面会遗漏一些关键组件。

例如以下内容导致播放标题背景视频：

<img src="img/video_fix.png" alt="" class="header-video--media" data-video-src="video/intro" data-teaser-source="video/intro" data-provider="Vimeo" data-video-width="1920" data-video-height="960">

如果我将它包含在index.html中，它可以正常工作。但如果我将它包含在控制器中，它就不会渲染。

另一个不呈现的代码：

<section class="parallax-window" data-parallax="scroll" data-image-src="img/bg_office.jpg" data-natural-width="1200" data-natural-height="600">

在搜索时，我发现你不能直接在视图中包含jQuery插件，但必须在指令中这样做。但是，我还没有找到任何可以让我理解如何在角度视图中合并jQuery插件的指南。

index.html中包含以下代码：

<script src="js/video_header.js"></script>
<script>
  $(document).ready(function () {
    'use strict';
    HeaderVideo.init({
      container: $('.header-video'),
      header: $('.header-video--media'),
      videoTrigger: $("#video-trigger"),
      autoPlayVideo: true
    });

  });
</script>

以下是video_header.js的代码

var HeaderVideo = function (e, i) {
  var o = {
    container: e(".header-video"),
    header: e(".header-video--media"),
    videoTrigger: e("#video-trigger"),
    videoCloseTrigger: e("#video-close-trigger"),
    teaserVideo: e("#teaser-video"),
    autoPlayVideo: !1
  }, r = function (i) {
    o = e.extend(o, i), t(), d(), a(), o.videoCloseTrigger.hide(), videoDetails.teaser && n(), o.autoPlayVideo && l()
  }, t = function () {
    return videoDetails = {
      id: o.header.attr("data-video-src"),
      teaser: o.header.attr("data-teaser-source"),
      provider: o.header.attr("data-provider").toLowerCase(),
      videoHeight: o.header.attr("data-video-height"),
      videoWidth: o.header.attr("data-video-width")
    }, videoDetails
  }, d = function () {
    o.container.data("aspectRatio", videoDetails.videoHeight / videoDetails.videoWidth), e(window).resize(function () {
      var i = e(window).width(), r = e(window).height();
      o.container.width(i).height(i * o.container.data("aspectRatio")), r < o.container.height() && o.container.width(i).height(r)
    }).trigger("resize")
  }, a = function () {
    o.videoTrigger.on("click", function (e) {
      e.preventDefault(), l(), o.videoCloseTrigger.fadeIn()
    }), o.videoCloseTrigger.on("click", function (e) {
      e.preventDefault(), s()
    })
  }, n = function () {
    if (Modernizr.video && !f()) {
      var e = videoDetails.teaser, i = '<video autoplay="true" loop="loop" muted id="teaser-video" class="teaser-video"><source src="' + e + '.mp4" type="video/mp4"><source src="' + e + '.ogv" type="video/ogg"></video>';
      o.container.append(i)
    }
  }, v = function () {
    if ("youtube" === videoDetails.provider)var e = '<iframe id="video" src="http://www.youtube.com/embed/' + videoDetails.id + '?rel=0&amp;hd=1&autohide=1&showinfo=0&autoplay=1&enablejsapi=1&origin=*" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>'; else if ("vimeo" === videoDetails.provider)var e = '<iframe id="video" src="http://player.vimeo.com/video/' + videoDetails.id + '?title=0&amp;byline=0&amp;portrait=0&amp;color=3d96d2&autoplay=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>'; else if ("html5" === videoDetails.provider)var e = '<video autoplay="true" loop="loop" id="video"><source src="' + videoDetails.id + '.mp4" type="video/mp4"><source src="' + videoDetails.id + '.ogv" type="video/ogg"></video>';
    return e
  }, l = function () {
    o.header.hide(), o.container.append(v()), c(), o.teaserVideo.hide()
  }, s = function () {
    e("#video").remove(), o.teaserVideo.fadeIn(), u(), g()
  }, c = function () {
    o.videoTrigger && o.videoTrigger.fadeOut("slow")
  }, u = function () {
    o.videoTrigger && o.videoTrigger.fadeIn("slow")
  }, g = function () {
    o.videoCloseTrigger.hide()
  }, f = function () {
    return e(window).width() < 900 && Modernizr.touch ? !0 : !1
  };
  return {init: r}
}(jQuery, document);

Answer 1

将您的jquery代码移动到控制器中。单独使用jquery外部角度将无法正常工作。并确保在角度之前加载jquery。将jquery与angular混合起来并不是一个好习惯，然后angular可以做几乎所有的事情，并且内置精简jquery。

data-src标签在index.html中工作，但不在角度视图中工作

1 个答案: