AngularJS directives and require

Question

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

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

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

.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- translude加载它。一旦文件加载完成，回调函数被调用，这只是告诉视图它已经完成加载。

还有一些其他的小细节你应该能够解决(改变视图等)。

在这个例子中，我只需要一个其他指令，但在项目中有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加载与否。在"父"指令我有范围。加载函数，该函数在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。广播应该能帮到你。当加载完成时广播。从正在加载图像的指令发布消息。在需要知道加载何时完成的指令上，监听消息。