jQuery插件没有'；我不能和Angularjs很好地合作

我在我的项目中使用了jqueryslider，我正在使用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>

和jQuery滑块代码（使其成为滑块。我正在使用此插件）

当我尝试这段代码时，我的所有图像都是从数据库中加载的（通过firebug进行调试）但是jQuery slider没有对其应用动画或滑动效果
当我删除

data ng repeat=“image in gallery

并使用一些静态内容（即图像）时，我会恢复滑动效果。
这里的问题是什么。我认为Angular是如何操作我的DOM的。这就是为什么每当我在滑块上使用一些Angular属性时，我都会遇到这个问题。
注意：我对jQuery新闻也有同样的问题，即jQuery

InnerFade

plugin
以下是如何使用

innerfide

<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>

如何解决这些问题？
更新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' });
    }]);

而且它对这两个方面都有效，即

滑块

和

内部淡入度

 $(document).ready(function () {

在angular将内容加载到页面之前触发。只有在angular加载内容后才应激活jQuery滑块脚本。这里的部分问题是angular没有为

$digest

提供回调，因此您没有要侦听的事件

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

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

差不多

   <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>

其工作方式非常简单。

$watch

函数将监视包含数据的作用域部分。当该部分发生变化时（包括初始化），它将在带有指令的

元素

上启动

innerfade

jQuery函数。我们还将'C'传递给restrict参数，因此此自定义指令将是一个纯类指令（我注意到您似乎喜欢这样）

{{fadeItem}

现在，您所要做的就是将数据绑定到控制器中的

$scope.innerData

（以您喜欢的任何方式绑定它，包括ajax），它就会正常工作。您甚至可以更改

$scope.innerData

上的数据，它将以完整的jQuery荣耀进行更新。

一些想法
1） 我的猜测是，你的主应用程序页面出现了顺序错误。在angularjs之后是否有jQuery包含？我假设你使用的是ng repeat指令

2） 将$更改为jQuery

3）将文件准备好。在主页上……也考虑用< /P>替换它。

 window.onload=function(){} 

---

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

Angular正在操作您的dom，ng repeat指令在有列表可供使用时正在创建元素。因此，您需要在Angular创建完元素后调用

。slides

，因为该插件正在更改dom本身。

这里有一个指令，您可以用来调用

$。基于数组的长度>0时，在元素上滑动

。它显示使用诸如“开始”之类的额外属性来修改对幻灯片的调用。在这里，它检查$scope上名为“images”的数组，并在链接阶段调用

.slidesjs（）时调用
$timeout（）

angular创建DOM后。我不知道您使用了什么插件，所以我找到了一个名为“看起来很像”的插件。下面是一个plunker：

Html:

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

向幻灯片添加指令

正如上面所说：“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);
});

---

我可以将它转换为指令，但我现在没有时间做这项工作，并测试它作为完整的代码交付。另外，最好只是了解angular生态系统是如何工作的。这应该不会太难，而且非常值得知道。@DotNetDreamer如果你最终使用自定义指令方法，不要忘记访问回答这个问题。嘿，我注意到你在这个问题上开了一个悬赏。怎么了？自定义指令的方向对你不起作用吗？不，亲爱的，问题是我不完全理解

指令。我尝试了不同的指令，但不起作用。我这里还有4个开发人员，如果你能提供答案，他们也会给+1，因为他们有这个问题，但在
Firefox、Chrome
中，当我按下
Ctrl+f5
键时，牙刷工作正常。但是，当我只需
刷新
浏览器时（没有Ctrl+f5），那么它就不工作了。在
IE
中，它根本不工作，而且，如果我从另一条路线回来，行为也不适用。在
窗口中放置
警报（“它已加载！”）；
在
窗口中。onload
，当我从另一条路线回来时，我看不到任何警报。关于IE，请尝试在标题中添加这一行：id=“ng app“无论如何，让我们切入正题，为你完成这件事吧！请允许我访问所有代码，我将为您重新编写，并提供详细的注释和解释，以供将来参考。非常感谢。但是我怎样才能将我的文件发送给您数据是从数据库中提交的，如下=>
FrontGallery=$resource（basePath+'gallery？culture=en-US'）$scope.gallery=FrontGallery.query（）不需要，对$scope的调用。$watch将调用
 $(document).ready(function () {

   <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>

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

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

 window.onload=function(){} 

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

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

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