Question

我已经通过Yeoman创建了一个AngularJS项目，我最终得到了我的Angular模块和指令，但是我的指令代码似乎没有正确实例化，所以幻灯片jQuery插件不起作用但是如果我进入控制台并运行

$('#slideshow').slides()

幻灯片功能似乎可以减去CSS ....

我的slide.js包含我的包装jQuery插件的指令是

'use strict';

angular.module('slidesjs', [])

.directive('slidesjs', function() {
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            angular.element(element).slides(scope.$eval(attrs.slides));
        }
    };
});

我的main.html是

<div id='slideshow' slides>
<div class="jumobotron" ng-repeat="msg in messages | reverse">
  <img class="img-responsive" ng-src="[URL]"/>
</div>
</div>

我想要使用的插件位于this website

我已将app.js修改为以下

'use strict';

angular.module('App', [
  'firebase',
  'angularfire.firebase',
  'angularfire.login',
  'simpleLoginTools'
])

.controller('MainCtrl', ['$scope', '$firebase',
    function ($scope, $firebase) {
      var ref = new Firebase('[URL]');
      $scope.images = $firebase(ref.endAt().limit(5)).$asArray();
    }])

.filter('reverse', function() {
  return function(items) {
    return items.slice().reverse();
  };
})

.directive('mySlides', function() {
    return{
      restrict: 'A',
      link: function(scope, element, attrs, ctrl) {
        scope.$watch(attrs.mySlides, function(value) {
          setTimeout(function() {
            if (value.length > 0) {
              $(element[0]).slidesjs({
                preload: true,
                preloadImage: '/content/images/theme/loading.gif',
                play: attrs.play || 5000,
                pause: attrs.pause || 2500,
                start: attrs.start || 1,
                hoverPause: attrs.hoverPause || true,
                navigation: { active: true, effect: "slide" }
              });
            }
          }, 1);
        });
      }
    };
})
;

Answer 1

关于您在回答之前尝试帮助您学习的一些观察：

如果幻灯片发生变化，您会想要在指令中进行某种观察。您的单$eval还不够。使用scope.$watch或attrs.$observe来完成此操作，具体取决于您需要做什么 - 我会谷歌，阅读官方文档/ API等，以了解这一点。
您想要更改视图，因为attrs.slides将是属性的值（可能是插值的），现在您没有。所以我的意思是slides="[this is the value interpolated by attrs.slides]"。
我认为该库的jQuery调用是slidesjs()而不是slides()。

好的说了所有，我会看看这个玩家 - 我认为有人已经完成了与Angular的集成（从this answer被盗）：< / p>

http://plnkr.co/edit/4qdUctYMIpd8WqEg0OiO?p=preview

<强>指令

app.directive('mySlides', function() {
  var directive = {
    restrict: 'A',
    link: function(scope, element, attrs, ctrl) {
      scope.$watch(attrs.mySlides, function(value) {
        setTimeout(function() {
          // only if we have images since .slidesjs() can't
          // be called more than once
          console.log("attrs.start is:");
          console.dir(attrs.start);
          if (value.length > 0) {
            $(element[0]).slidesjs({
              preload: true,
              preloadImage: '/content/images/theme/loading.gif',
              play: attrs.play || 5000,
              pause: attrs.pause || 2500,
              start: attrs.start || 1,
              hoverPause: attrs.hoverPause || true,
              navigation: { active: true, effect: "slide" }
            });
          }
        }, 1);
      });
    }
  };
  return directive;
});

<强>控制器

$scope.images = [
    { url: "http://slidesjs.com/img/example-slide-350-1.jpg" },
    { url: "http://slidesjs.com/img/example-slide-350-2.jpg" },
    { url: "http://slidesjs.com/img/example-slide-350-3.jpg" },
    { url: "http://slidesjs.com/img/example-slide-350-4.jpg" }
  ]

<强> HTML

<div my-slides="images" start="4">
  <img ng-repeat="image in images" ng-src="{{image.url}}" />
</div>

如果你需要更多的帮助，如果你设置了一个吸尘器或显示你被卡住的地方，它会对我和其他人有所帮助。

指令不适用于AngularJS项目中的SlidesJS jQuery插件

1 个答案: