AngularJS指令和要求

Question

我有一个越来越复杂的指令。所以我决定把它分成几部分。

指令本身加载了一个服装SVG图形，当SVG加载它时，然后运行一个配置方法，该方法将应用设计，应用挑选的颜色(如果编辑，则应用数据库颜色)和其他零碎内容。

正如我所说的，这一切都在一个指令中，但我现在决定将逻辑分离出来。所以我创建了我的第一条指令：

.directive('configurator', function () {

    // Swap around the front or back of the garment
    var changeView = function (element, orientation) {

        // If we are viewing the front
        if (orientation) {

            // We are viewing the front
            element.addClass('front').removeClass('back');
        } else {

            // Otherwise, we are viewing the back
            element.addClass('back').removeClass('front');
        }
    };

    return {
        restrict: 'A',
        scope: {
            garment: '=',
            onComplete: '&'
        },
        require: ['configuratorDesigns'],
        transclude: true,
        templateUrl: '/assets/tpl/directives/kit.html',
        link: function (scope, element, attrs, controllers) {

            // Configure our private properties
            var readonly = attrs.hasOwnProperty('readonly') || false;

            // Configure our scope properties
            scope.viewFront = true;
            scope.controls = attrs.hasOwnProperty('controls') || false;
            scope.svgPath = 'assets/garments/' + scope.garment.slug + '.svg';

            // Apply the front class to our element
            element.addClass('front').removeClass('back');

            // Swaps the design from front to back and visa versa
            scope.rotate = function () {

                // Change the orientation
                scope.viewFront = !scope.viewFront;

                // Change our view
                changeView(element, scope.viewFront);
            };

            // Executes after the svg has loaded
            scope.loaded = function () {

                // Call the callback function
                scope.onComplete();
            };
        }
    };
})

这在设计上非常简单，它获取服装并找到正确的SVG文件，然后使用ng-transclude加载它。一旦文件加载完成，就会调用一个回调函数，这只会告诉视图它已经加载完毕。

你还需要做一些其他的工作(改变视图，等等)。

在这个示例中，我只需要一个指令，但在项目中有3个必需的指令，但为了避免复杂，一个指令就足以证明我的问题。

我的第二个指令是应用设计所需的东西。它看起来是这样的：

.directive('configuratorDesigns', function () {
    return {
        restrict: 'A',
        controller: 'ConfiguratorDesignsDirectiveController',
        link: function (scope, element, attrs, controller) {

            // Get our private properties
            var garment = scope.$eval(attrs.garment),
                designs = scope.$eval(attrs.configuratorDesigns);

            // Set our controller designs array
            controller.designs = designs;

            // If our design has been set, watch it for changes
            scope.$watch(function () {

                // Return our design
                return garment.design;

            }, function (design) {

                // If we have a design
                if (design) {

                    // Change our design
                    controller.showDesign(element, garment);
                }
            });

        }
    }
})

该指令的控制器只是遍历SVG并找到与服装设计对象匹配的设计。如果它找到了它，它就会隐藏其他的并显示那个。我遇到的问题是，这个指令不知道SVG是否加载。在"parent“指令中，我有scope.loaded函数，该函数在SVG加载完成时执行。"parent“指令的模板如下所示：

<div ng-transclude></div>
<div ng-include="svgPath" onload="loaded()"></div>
<a href="" ng-click="rotate()" ng-if="controls"><span class="glyphicon glyphicon-refresh"></span></a>

因此，我的问题是:如何获得所需的指令以了解SVG加载状态？

Answer 1

如果我没理解错你的问题，$rootScope.broadcast应该会帮你。只需在加载完成时进行广播。从您要加载图像的指令中发布一条消息。在需要知道加载何时完成的指令上，侦听消息。