Question

我在我的项目中使用 jQuery滑块，我使用angular加载图像。我目前的观点是这样的;

        <div id="slides">
            <div class="slides_container">
                <a href="" data-ng-repeat="image in gallery">
                    <img data-ng-src="{{image.imageUrl}}" width="919" height="326" alt="" />
                </a>
            </div>
        </div>

控制器;

blogApp.controller("HomeController", ['$scope', '$resource', function ($scope, $resource) {
    var basePath = '/api/',
        FrontGallery = $resource(basePath + 'gallery?culture=en-US'),

    $scope.gallery = FrontGallery.query();
}]);

和jQuery滑块代码（使其成为滑块。我正在使用此插件http://archive.slidesjs.com/）

$(document).ready(function () {
    $('#slides').slides({
        preload: true,
        preloadImage: '/content/images/theme/loading.gif',
        play: 5000,
        pause: 2500,
        hoverPause: true
    });
});

当我尝试使用此代码时，我的所有图像都是从数据库加载的（通过firebug调试）但是jQuery滑块没有应用动画或滑动效果
当我删除data-ng-repeat="image in gallery并使用一些静态内容，即图像时，我得到了滑动效果这有什么问题。我认为Angular正在操纵我的DOM。这就是为什么我每次放置时都会遇到这个问题，即在我的滑块上使用一些角度属性。
注意：我对jQuery新闻有同样的问题，即jQuery InnerFade插件http://medienfreunde.com/lab/innerfade/
以下是innerFade的使用方式;

<h1>
    <img src="/content/images/theme/hotnews.png" alt="" />Hot News</h1>
<ul id="news">
    <li class="ng-repeat:headline in news">
        <span class="ng-bind:headline.description"></span>
        <a href="#" title="Read More">» more</a>
    </li>
</ul>

和控制器;

var HotNews = $resource(basePath + 'article/hotnews?culture=en-US');
$scope.news = HotNews.query();

我如何解决这些问题？
更新2： 这是我的路线;

// declare a module
var blogApp = angular
    .module('blogApp', ['ngResource', 'ngSanitize'])
    .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
        //$locationProvider.html5Mode(true);
        //configure the routes
        $routeProvider
            .when('/', {
                // list the home page
                templateUrl: "tmpl/home.html",
                controller: "HomeController"
            })
            .when('/article/:id', {
                // access custom param
                foo: "hello world",
                // list the home page
                templateUrl: "tmpl/article.html",
                controller: "ArticleController"
            })
            .when('/404', {
                template: '<h1>404 Not Found!</h1>'
            })
            .otherwise({ redirectTo: '/404' });
    }]);

解决方案＃1： 临时，（正如 @Jason Goemaat 回答）对我有用。所以，这就是我所做的。我没有创建任何directive但直接我将$timeout注入我的控制器然后我做了以下操作;

$timeout(function () {
    jQuery('#news').innerfade({
        animationtype: 'slide',
        speed: 750,
        timeout: 2000,
        type: 'random',
        containerheight: '1em'
    });
    jQuery('#slides').slides({
        preload: true,
        preloadImage: 'image/theme/loading.gif',
        play: 5000,
        pause: 2500,
        hoverPause: true
    });

}, 100);

它确实适用于Slider和InnerFade

Answer 1

 $(document).ready(function () {

在angular将内容加载到页面之前触发。只有在角度加载内容后才能激活jQuery滑块脚本。这里的部分问题是angular不会为$digest提供回调，因此您没有要监听的事件。

内容加载 - ＆gt;事件回调 - ＆gt; ui build，虽然在jQuery和标准的javascript思维中很常见，但它不是角度心态的一部分。幸运的角度有一个非常强大的方法来处理这个问题。

您需要将jQuery幻灯片脚本转换为角度directive。然后它将成为角度处理空间的一部分，并作为角度摘要周期的一部分进行实例化。

像

这样的东西

   <div id="slides" my-slideshow >
        <div class="slides_container">
            <a href="" data-ng-repeat="image in gallery">
                <img data-ng-src="{{image.imageUrl}}" width="919" height="326" alt="" />
            </a>
        </div>
    </div>

祝你好运！

使用innerfade的快乐示例时间（我还没有测试过，会尽快做到）。首先，您的应用程序必须声明角度模块（如果尚未声明）。 ng-app="myModule"。 http://docs.angularjs.org/api/angular.module

（确保您的控制器也已连接！）

现在您可以在该模块上声明一个指令。这太酷了。

angular.module('myModule').directive("innerFade", function () {
   var res = {
     restrict : 'C',
     link     : function (scope, element, attrs) {
           scope.$watch(attrs.innerFade, function(){             
               element.innerfade({
                  speed: 'slow',
                  timeout: 1000,
                  type: 'sequence',
                  containerheight: '1.5em'
               });
           });
        }
     };
  return res;
});

这种方式非常简单。 $watch函数将监视包含数据的范围部分。当更改（包括初始化）时，它将使用指令触发innerfade上的element jQuery函数。我们也将'C'传递给restrict参数，所以这个自定义指令将是一个只有类的指令（我注意到你似乎喜欢这样）。

 <ul class="inner-fade:innerData" >
      <li class="ng-repeat:fadeItem in innerData">{{fadeItem}}</li>
 </ul>

现在你所要做的就是将数据绑定到控制器中的$scope.innerData（以任意方式绑定它，包括ajax），它就可以了。您甚至可以更改$scope.innerData上的数据，它将以完整的jQuery荣耀更新。

Answer 2

Angular IS操纵你的dom，ng-repeat指令在有一个可供使用的列表时创建元素。因此，你需要在角度完成之后调用.slides来创建元素，因为该插件正在改变DOM本身。

这是一个指令，您可以根据数组的长度＆gt;来调用元素上的$.slides。它显示了使用额外的属性，如'start'来修改对幻灯片的调用。在这里，它检查$ scope上的一个名为'images'的数组，并在链接阶段调用$timeout()，以便在创建DOM时完成角度调用.slidesjs()。我不知道你使用了什么插件，所以我发现了一个名为'slidesjs的插件看起来很相似。 '这是一个吸血鬼： http://plnkr.co/edit/4qdUctYMIpd8WqEg0OiO?p=preview

HTML：

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

指令：

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
          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;
});

有一点需要注意的是，它仍然只能被调用一次，因此如果您的图像列表得到更新，它将无法工作。为此，您可以在指令中创建内容......

Answer 3

一些想法 1）我的猜测是你的主应用页面有一些顺序错误。你有jQuery包括之后 angularjs？我假设您正在使用ng-repeat指令？

2）将$更改为jQuery

3）将document.ready脚本放在主页面中......也考虑用

替换它

 window.onload=function(){}

如果您可以显示主页面和视图的代码，我相信我可以调试。

Answer 4

向#slides

添加指令

app.directive("slideDirective", function () {
     return function (scope, element, attrs) {
         // Dom
         element.slides({
             preload: true,
             preloadImage: '/content/images/theme/loading.gif',
             play: 5000,
             pause: 2500,
             hoverPause: true
         });
     }
}

Answer 5

正如所说：“jQuery滑块脚本只应在angular加载内容后激活” 所以你可以等待它加载，然后你的jQuery代码就会开始运行。

$(document).ready(function () {
setTimeout(function(){
      $('#slides').slides({
        preload: true,
        preloadImage: '/content/images/theme/loading.gif',
        play: 5000,
        pause: 2500,
        hoverPause: true
     });
}, 10);
});

jQuery插件与Angularjs不兼容

5 个答案: