Question

我正在将高级HTML主题翻译成Angularjs应用程序。我已经加载angular-flexslider并且有效，但主题使用自定义Jquery逻辑来控制滑块的布局。

我创建了一个包含Jquery逻辑的自定义指令，它主要工作。我唯一的问题是自定义指令在angular-flexslider指令之前触发并抓取标记{{img.src}}而不是图像URL。

我查找了指令优先级设置，但没有任何运气。

强制自定义指令在执行之前等待angular-flexslider指令完成其DOM操作的正确方法是什么？

编辑：

下面是flex-slider指令的HTML。我的指令（flex-slide）需要适用于li元素。该指令有效，但img-src作为{{slide.src}}传递，而不是由flex-slider指令替换为URL。对我来说看起来像一个简单的解析顺序问题，但我不太了解Angular可以解决它。

<flex-slider slider-id="home-slider" slide="slide in slides track by slide.src" direction-nav="false" animation-speed="400" added="initSlide()">

    <li class="has-parallax cover-bg" flex-slide img-src="{{slide.src}}">
        <div class="row slide-content text-center">
            <div class="medium-12 medium-centered columns">
                <img class="headline-logo" alt="logo" src="assets/images/logo-white.png" />
                <div class="home-title offix">

                    <div class="title-upper offix">
                        <h6 class="left alt-h text-white">Header 1</h6>
                        <h6 class="right alt-h text-white">Header 2</h6>
                    </div>
                    <h1 class="headline">Brand</h1>
                    <div class="title-lower">
                        <p class="text-white"><em>Tagline</em></p>
                    </div>
                </div>

            </div>
        </div>
        <div class="slide-overlay"></div>
        <img ng-src="{{slide.src}}" class="slider-bg" />
    </li><!--end of individual slide-->

</flex-slider>

指令：

'use strict';

angular.module('app')
.directive('flexSlide', [function () {
    return {
        restrict: "A",
        scope: {
            imgSrc:'=imgSrc'
        },
        link: function (scope, element, attr) {
            // DO JQUERY STUFF HERE with imgSrc attr

        }
    }
}]
);

Answer 1

我认为您在指令代码中使用{{img.src}}。您应该将url作为属性传递到自定义指令中。

如果要在flexslider指令中使用嵌套指令（如使用自定义指令），可以参考this

Answer 2

我终于意识到该指令可以访问父作用域。由于angular-flexslider指令作为循环起作用，我可以直接从我的自定义指令中的循环访问范围变量，如下所示。

'use strict';

angular.module('perspectiveUas')
    .directive('flexSlide', [function () {
        return {
            restrict: "A",
            link: function (scope, element, attr) {

               // DO JQUERY STUFF HERE
               // $scope.slide is available from parent scope.

            }
        }
    }]
);

Angularjs嵌套指令令

2 个答案: