8

我在我的项目中使用了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 新闻也有同样的问题，即 jQueryInnerFade插件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);

它确实适用于 ie forSlider和 forInnerFade

4

5 回答 5

9 
 $(document).ready(function () {

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

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

您需要将 jQuery 幻灯片脚本转换为 angular指令。然后它将成为角度过程空间的一部分，并被实例化为角度摘要循环的一部分。

就像是

   <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功能将监视包含您的数据的范围部分。当它改变时（包括初始化），它会在with 指令上触发innerfadejQuery 函数。element我们还将“C”传递给限制参数，因此这个自定义指令将是一个仅限类的指令（我注意到你似乎喜欢这样）。

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

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

于 2013-06-03T15:12:14.623 回答
6

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

这是一个指令，您可以$.slides根据数组长度 > 0 的时间来调用元素。它显示使用额外的属性（如“开始”）来修改对幻灯片的调用。在这里，它会检查 $scope 上名为“images”的数组，并$timeout()在链接阶段调用以.slidesjs()在 Angular 完成创建 DOM 时调用。我不知道你用的是什么插件，所以我找到了一个看起来很相似的名为slidesjs的插件。'这是一个 plunker： 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;
});

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

于 2013-06-09T07:00:01.830 回答
1

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

2) 将 $ 更改为 jQuery

3) 将 document.ready 脚本放在主页...也考虑将其替换为

 window.onload=function(){}

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

于 2013-06-09T06:29:21.880 回答
1

向#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
         });
     }
}
于 2013-06-09T07:50:29.647 回答
1

正如人们所说：“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);
});
于 2015-09-18T22:09:50.617 回答