AngularJS指令，ng-repeat和Jquery插件

Question

我在html中有一个部分，我加载了推荐书，我正在使用flexslider。

标记看起来像这样：

<section class="testimonials">
<div class="row">
    <div class="small-12 column">
        <div class="flexslider">
            <ul class="slides">
                <li>
                    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h2>
                    <span>- Author Name</span>
                </li>
                <li>
                    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h2>
                    <span>- Author Name</span>
                </li>
                <li>
                    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit</h2>
                    <span>- Author Name</span>
                </li>
                <li>
                    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h2>
                    <span>- Author Name</span>
                </li>
                <li>
                    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</h2>
                    <span>- Author Name</span>
                </li>
            </ul>
        </div>
        <div class="author-thumbs">
            <ul class="slides">
                <li>
                    <div>
                        <span class="container">
                            <img src="assets/img/testimonial-author-pic.jpg" alt="">
                        </span> 
                    </div>
                </li>
                <li>
                    <div>
                        <span class="container">
                            <img src="assets/img/testimonial-author-pic.jpg" alt="">
                        </span> 
                    </div>
                </li>
                <li>
                    <div>
                        <span class="container">
                            <img src="assets/img/testimonial-author-pic.jpg" alt="">
                        </span> 
                    </div>
                </li>
                <li>
                    <div>
                        <span class="container">
                            <img src="assets/img/testimonial-author-pic.jpg" alt="">
                        </span> 
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

起初我遇到了麻烦，因为Angular在文档准备好后加载了部分文件，我的滑块停止工作。所以我将flexslider初始化移动到了一个指令。像这样：

app.directive('testimonials', function() {
return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        element.find('.author-thumbs').flexslider({
            animation: "slide",
            controlNav: "thumbnails",
            controlNav: false, 
            directionNav: false,
            itemWidth: 80,
            minItems: 4,
            maxItems: 4,
            asNavFor: ".testimonials .flexslider",
        });
        element.find('.flexslider').flexslider({
            animation: "slide",
            controlNav: "thumbnails",
            controlNav: false, 
            directionNav: false,
            smoothHeight: true,
            sync: ".testimonials .author-thumbs"
        });
    }
};
});

这样我就可以在html部分添加推荐书了。

好的，但现在我想把这个静态内容移到我的控制器并进行重复。所以我这样做了：

app.controller('HomeCtrl', function($scope){
    $scope.testimonials = [
        {"quote":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod", "author":"Author Name", "img":"assets/img/testimonial-author-pic.jpg"},
        {"quote":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit.", "author":"Author Name", "img":"assets/img/testimonial-author-pic.jpg"},
        {"quote":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod", "author":"Author Name", "img":"assets/img/testimonial-author-pic.jpg"},
        {"quote":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod", "author":"Author Name", "img":"assets/img/testimonial-author-pic.jpg"},
    ]
});

为推荐部分标记创建了一个新文件，并将其指令更改为E类型：

app.directive('testimonials', function() {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'partials/elements/testimonials.html',
        link: function(scope, element, attrs) {
            element.find('.author-thumbs').flexslider({
                animation: "slide",
                controlNav: "thumbnails",
                controlNav: false, 
                directionNav: false,
                itemWidth: 80,
                minItems: 4,
                maxItems: 4,
                asNavFor: ".testimonials .flexslider",
            });
            element.find('.flexslider').flexslider({
                animation: "slide",
                controlNav: "thumbnails",
                controlNav: false, 
                directionNav: false,
                smoothHeight: true,
                sync: ".testimonials .author-thumbs"
            });
        }
    };
});

现在......好吧，现在推荐书出现了但是flexslider没有被初始化。谁知道我做错了什么？我正在寻找和回答可以解释为什么我做错了，因为我正在努力学习它。

我正在运行angularjs 1.3.15

Answer 1

我设法让这个工作包装了$ timeout内的flexslider初始化，如下所示：

app.directive('testimonials', function($timeout) {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'partials/elements/testimonials.html',
        link: function(scope, element, attrs) {
            $timeout(function(){
                element.find('.author-thumbs').flexslider({
                    animation: "slide",
                    controlNav: "thumbnails",
                    controlNav: false, 
                    directionNav: false,
                    itemWidth: 80,
                    minItems: 4,
                    maxItems: 4,
                    asNavFor: ".testimonials .flexslider",
                });
                element.find('.flexslider').flexslider({
                    animation: "slide",
                    controlNav: "thumbnails",
                    controlNav: false, 
                    directionNav: false,
                    smoothHeight: true,
                    sync: ".testimonials .author-thumbs"
                });
            });
        }
    };
});

发生的事情是，因为我的推荐变量是硬编码的，所以在完成所有内容加载后我需要$ timeout来运行javascript。

当我更改它以从服务器加载推荐时，$ watch可能是一个更好的解决方案，如Dennis Smolek所建议的，因为会发生对推荐的实际更改，从而触发flexlider init。我不是100％肯定，因为我还没有测试过，但我坚信这会起作用。当我进行更改并测试时，我会更新此答案

Answer 2

因此，当您在ng-repeat中更新内容时，您会发现幻灯片可能无法正常工作，因为它们不会附加到flexslider调用，但我还没有尝试过flexslider / Angular。

首先，如果您的计划只是在加​​载内容时触发，我认为您不需要该指令。你的控制器应该能够抓住它。

为什么它不起作用的原因是，当链接函数在摘要循环中运行时，这些元素不存在所以你在什么都没有调用flexslider，然后循环的下一部分到来并注入你的重复内容，但您已经开始通话了。

我会做一个$ watch and setup功能：

function setupFlexslider() {
    //your flexslider code
} 
$scope.$watch('testimonials', function(newData,oldData) {
   if(newData){
       setupFlexslider();
   }
}

因此，当您填充该值时（元素应该存在），这将触发，如果您更改它们，它将重新启动。我现在唯一不知道的是当你两次点燃flexslider时会发生什么......