Question

目前我正在尝试在AngularJS指令中使用此插件https://github.com/zurb/twentytwenty。

当我第一次加载我的应用程序时，一切正常，但由于插件在$(window).load之后运行而我的应用程序是SPA，因此它只执行一次。这意味着当我离开视图并稍后返回时，插件将停止工作。

我的指令如下：

.directive('ngCompare', function() {
return {
  cache: false,
  restrict: 'A',
  replace: true,
  scope: {
    img1: '=',
    img2: '='
  },
  template: "<div id='container1'>" +
  "<img ng-src='{{img1}}'>" +
  "<img ng-src='{{img2}}'>" +
  "</div>",
  link: function(scope, element, attrs) {
    $(window).load(function(){
      $(element).twentytwenty();
    });
  }
}
})

我还在学习AngularJS，这是我第一次在指令中使用jQuery插件，所以我完全不知道如何解决这个问题。：（

Answer 1

你应该把它放在element.load＆amp; $window.load两者都是，因此每当元素被渲染时它都会触发。窗口被加载。

您需要在element.on('load')事件中设置$window.load事件，这样才能确保只在指令开始时触发一次事件

<强>指令

.directive('ngCompare',['$window', function($window) {
    return {
        cache: false,
        restrict: 'A',
        replace: true,
        scope: {
            img1: '=',
            img2: '='
        },
        template: "<div id='container1'>" +
            "<img ng-src='{{img1}}'>" +
            "<img ng-src='{{img2}}'>" +
            "</div>",
        link: function(scope, element, attrs) {
            var setElementLoadEvent = funcion() {
                element.on('load', function() {
                    element.twentytwenty();
                });
            };
            $window.load(function() {
                element.twentytwenty();
                setElementLoadEvent();
            });
        }
    }
}])

在指令$（window）.load中使用jQuery插件

1 个答案: