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

通常当你拥有修改DOM的jQuery插件时，你想为它们创建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指令包装jQuery插件，以及如何专门处理plax的用例。

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

1 个答案: