Angularjs 嵌套指令顺序

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 嵌套指令顺序

Angularjs Nested Directive Order

jquery

flexslider

angularjs