3

我想要做的是使用 ng-repeat 指令有角度地构建我的轮播结构，然后将其提供给 owl carousel jquery 插件。部分技巧是这个轮播带有一个视图（ngView）。

可悲的是，这似乎并不那么简单。

到目前为止，我探索的选项是：

  1. $viewContentLoaded事件。这不起作用，并且显然是不赞成的（因为它相当于来自控制器的 DOM 操作）
  2. 只需在视图页面底部包含一些脚本来初始化轮播插件。这适用于静态内容，但不适用于通过 ng-repeat 添加的内容
  3. 添加自定义指令。好的，这可行，但这似乎意味着我必须自己建立整个旋转木马。很好地使用 jQuery.append() 等。下面的代码如下。

基本上我的问题是：是否有其他/更好的方法来做到这一点（而不是无限循环和 HTML 字符串连接）？

请注意，我需要构建的真正轮播项目比下面的示例要复杂得多。

好的，现在一些代码：

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

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

接下来，指令配置：

app.directive('daCarousel',function () {
    var makeItLive = function (scope, element, attrs)
    {
        //TODO feed in real data here
        for (var i = 0; i < 10; i++) {                  
            $(element).append ('<div class="item">Item ' + i + '</div>');
        }

        $(element).owlCarousel({
            navigation : true, // Show next and prev buttons
            slideSpeed : 300,
            paginationSpeed : 400,
            singleItem:true                     

        });
};

编辑

好的，与此同时，我发现了该$templateCache服务。

本质上在脚本标签中定义一个模板（我的实际上是在相关视图中）：

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

1 回答 1

5

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

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

angular.module('ngApp')
.controller('MyCtrl', function ($scope) {
$scope.content = getDataSomeHow();
});

接下来，定义您的模板。我发现相关观点对我来说是一个好地方。请再次注意，您可能需要阅读有关隔离范围的信息。

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

好的，接下来，实际指令。请注意，使用preandpost根本没有帮助，我仍然不得不使用该$timeout服务来使轮播工作。

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>
于 2014-07-08T15:47:00.807 回答