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 部分添加推荐信了。

好的，但现在我想获取此静态内容并将其移动到我的控制器并进行 ng-repeat。所以我这样做了：

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

我设法将 flexslider 初始化包装在 $timeout 中，如下所示：

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。

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

它不起作用的原因是当 link 函数运行s 在摘要循环中时，这些元素不存在，所以你什么都不调用 flexslider，然后循环的下一部分出现并在您的重复内容中注入内容，但您已经运行您的电话。

我会执行 $watch 和设置功能：

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

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

AngularJS 指令、ng-repeat 和 Jquery 插件

AngularJS Directive, ng-repeat and a Jquery Plugin

jquery

flexslider

angularjs

angularjs-directive