Jquery 带猫头鹰旋转木马的AngularJS ng重复

我要做的是让angular使用ng repeat指令构建旋转木马的结构，然后将其提供给owl旋转木马jquery插件。 部分诀窍是，这个旋转木马带来了一个视图（ngView）

遗憾的是，这似乎并没有那么简单

到目前为止，我所探讨的选择是：

$viewContentLoaded

事件。这不起作用，而且显然是错误的 不赞成（因为这相当于从 控制器）

只需在查看页面底部包含一些脚本即可 初始化旋转木马插件。这适用于静态内容，但是 不适用于通过ng repeat添加的内容

添加自定义指令。好的，这是可行的，但它似乎意味着 然后我必须自己建造整个旋转木马。好用 下面是jQuery.append（）等的代码

基本上，我的问题是：有没有其他/更好的方法来做到这一点（相对于无休止的循环和HTML字符串连接）？

请注意，我需要构建的真正的旋转木马项目比下面的示例要复杂得多

好的，下面是一些代码：

首先，来自相关视图的HTML代码段：

<div class="owl-carousel owl-theme daCarousel" da-carousel="">
</div>

<script type="text/ng-template" id="specialsTemplate.html">
//HTML with AngularJS bindings etc here
</script>

然后，您可以在指令中这样做：

var tpl = $templateCache.get('specialsTemplate.html')   ;   
var compiled = $compile(tpl)(scope);
element.html (compiled);

最后一点，使用oakfish的建议

$timeout

：

$timeout (
            function () {
                $('#correctIdForYourCarouselElement').owlCarousel({

                    navigation : false, // Show next and prev buttons
                    slideSpeed : 300,
                    paginationSpeed : 400,
                    singleItem:true

                    // "singleItem:true" is a shortcut for:
                    // items : 1, 
                    // itemsDesktop : false,
                    // itemsDesktopSmall : false,
                    // itemsTablet: false,
                    // itemsMobile : false

                });
            },
            50
        );

---

好的，为了详细说明我上面的编辑，让我们给出更全面的答案

首先，您需要一个控制器将数据注入指令的作用域（请注意，这里我没有使用隔离作用域）：

接下来，定义模板。我发现相关的观点在我的案例中是一个很好的地方。 请再次注意，您可能需要阅读有关隔离作用域的内容

<script type="text/ng-template" id="specialsTemplate.html">
                    <div class="item" ng-repeat="group in content" >
                        <div class="container">
                            <div class="row" ng-repeat="itemRow in group">                              
                                <div class="col-lg-2 outerItemContainer" ng-repeat="item in itemRow">
                                    <div class="itemContainer">

                                        <div class="someClasss">
                                            {{item.description}} 
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </script>

好，然后是最后一位，实际指令使用：

<div ng-controller="MyCtrl"  >
                    <div specials-directive="" id="myCarousel" class="owl-carousel owl-theme">                                      
                    </div>
                </div>

您是否尝试过：$timeout（函数（）{element.owlCarousel（opts）；}，0）；嗨，oakfish56-事实上，我甚至没有考虑过基于超时的一轮工作。这可能会起作用，但是，我不得不做很多这样的事情，这意味着我可能会造成各种比赛条件。目前我采用的是指令式方法——一旦一切正常，我会在这里发布一些代码。谢谢你的回复！此外，请尝试这篇文章，它讨论如何在控制器/服务中获取数据，并使用ng repeat模板将其传递到指令中，而不是循环和创建div。[link]@oakfish56-好的，我唯一能让它最终工作的方法就是使用$timeout服务。至少我已经能够将模板代码移动到实际的外部模板文件中，在那里我可以自由地使用

ng repeat

和friends。超时的使用让我很恼火，因为我知道它正在打开一个竞争条件。但是现在可以了。作为补充说明，我还尝试通过

compile

选项传递pre和post函数，但没有成功。如果你把你的建议作为一个答案，我会这样做。你介意在JSFIDLE中给出一些工作示例吗。。。请把它放在我的待办事项清单上，可能在接下来的两天内（工作截止日期）无法完成。嗨，Fabii-是的，它正在工作，Bijay Rai要求了一个工作的JSFIDLE，我仍然没有时间坐下来真正做到这一点。我会尽快找点事做。

<script type="text/ng-template" id="specialsTemplate.html">
                    <div class="item" ng-repeat="group in content" >
                        <div class="container">
                            <div class="row" ng-repeat="itemRow in group">                              
                                <div class="col-lg-2 outerItemContainer" ng-repeat="item in itemRow">
                                    <div class="itemContainer">

                                        <div class="someClasss">
                                            {{item.description}} 
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </script>

angular.module('ngApp')
  .directive('specialsDirective', function ($compile,$templateCache,$timeout) {

    var buildIt = function (scope, element, attrs) {        

        var tpl = $templateCache.get('specialsTemplate.html')   ;   
        var compiled = $compile(tpl)(scope);
        element.html (compiled);
    };  

    var makeItScroll = function (scope, element,attrs) {    
            /* In THEORY, at this point it should be safe and fine
            * to call this jQM plugin. But it is not - does NOT work. Hence
            * the kludgy timeout crap here.
            */
            $timeout (
                function () {
                    $('#myCarousel').owlCarousel({

                        navigation : false, // Show next and prev buttons
                        slideSpeed : 300,
                        paginationSpeed : 400,
                        singleItem:true

                    });
                },
                50
            );

    };


    return {
      restrict: 'EA',
      replace:true,
      compile: function compile (tElement, tAttrs, transclude){
        return {
            pre: buildIt,
            post: makeItScroll
        }       
      }      
    };
  });

<div ng-controller="MyCtrl"  >
                    <div specials-directive="" id="myCarousel" class="owl-carousel owl-theme">                                      
                    </div>
                </div>