jquery - plax.js 仅在重新加载时有效

Question

好的，这是代码:

在 HTML 中:

<div class="col-xs-12" id="seccionCont10">
    <div id="seccionCont10texto" class="col-xs-6">
        <div class="contTextoNegro">Tus <p class="contTextoAzul contEnLinea">datos</p> siempre <p class="contTextoAzul contEnLinea">seguros</p></div>
        <div class="descripcionTextoCont">Con la mejor tecnología de Base de Datos SQL tus datos estarán siempre protegidos, también podrás respaldar tus datos desde Valery® Contabilidad.</div>
    </div>
    <img src="images/contabilidad/patronCont.png" id="patronCont" alt="">
    <img src="images/contabilidad/seccion10cont.png" id="candadoCont" alt="">
</div>

和 Jquery

$('#patronCont').plaxify({"xRange":200,"yRange":100});
    $.plax.enable({"activityTarget":$("#seccionCont10")});

现在，当我第一次加载时，或者我更改为另一个部分然后返回到 plax.js 所在的部分时，它不起作用，它不会移动背景，我必须重新加载它。

请注意，我正在使用 Angular 在部分组件之间进行切换，似乎当我切换时插件不会运行......当我重新加载时会发生一些事情触发它。

现在，我是 Angular 的新手，我只是不知道为什么它不起作用

更新

jquery代码是

$(document).ready(function(){                       

        $('#patronCont').plaxify({"xRange":200,"yRange":100});
        $.plax.enable({"activityTarget":$("#seccionCont10")});
    }
});

我试过这样触发它

        setTimeout( arro, 1000);
    function arro(){    
        $('#patronCont').plaxify({"xRange":200,"yRange":100});
        $.plax.enable({"activityTarget":$("#seccionCont10")});
    }

它也不起作用

Answer 1

通常当你有 jQuery 插件来修改你想要创建的 DOM angular directives对于在功能之后初始化和清理的它们。

由于 plax 的工作原理，要求您注册(plaxify)图像，然后启用 plax 本身，您可以使用两个指令来实现这一点，每个指令一个:

标记看起来像这样:

<img class="plaxImg" xRange="200" yRange="100" src="/path/to/image1.png">
<img class="plaxImg" xRange="200" yRange="100" src="/path/to/image2.png">
<img class="plaxImg" xRange="200" yRange="100" src="/path/to/image3.png">

<!-- ...then then sometime later: -->
<plax activityTarget="#seccionCont10" />

和指令类似:

// a directive to `plaxify` images    
app.directive('plaxImg', [function() {
  return {
    restrict: 'C',
    link: function (scope, elem, attrs) {
      $(elem).plaxify({"xRange": attrs.xRange, "yRange": attrs.yRange});
    }
  };
}]);

// and a drop in element directive to start plax
app.directive('plax', [function () {
  return {
    restrict: 'E',
    link: function (scope, elem, attrs) {
      var args = {};

      if (attrs.activityTarget) {
        args.activityTarget = $(attrs.activityTarget);
      }

      // probably want to disable first to be sure that plax isn't already
      // initialized
      $.plax.disable();
      // then enable with the new args
      $.plax.enable(args);

      elem.on('destroy', function () {
        $.plax.disable();
      });
    }
  }
}]);

请注意，这是粗略的，完全未经测试，可能不会有任何改进，但应该让您大致了解如何使用 Angular Directive(指令)包装 jQuery 插件，以及如何具体处理 plax 的用例。