AngularJS指令和要求

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

指令本身加载了一个garment 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);
                }
            });

        }
    }
})

<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中循环，并找到与服装设计对象匹配的设计。如果它找到了，它只会隐藏其他的并显示那个。 我遇到的问题是，该指令不知道是否加载了SVG。在“parent”指令中，我有scope.loaded函数，该函数在SVG完成加载时执行。 “parent”指令的模板如下所示：

.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);
                }
            });

        }
    }
})

<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加载状态？

如果我正确理解您的问题，$rootScope.broadcast应该可以帮助您解决问题。加载完成后广播即可。从正在加载图像的指令发布消息。在需要知道加载何时完成的指令上，侦听消息

用手表听？这是否意味着我的所有指令都需要使用类似的手表？当使用broadcast时，只需执行$rootscope.broadcast（“您的消息名称”）。您需要使用$rootscope.on（“your_message_name”，function（）{}）来侦听特定的your_message_name。您的\u消息\u名称可以是唯一的。该函数是在收到消息时执行的函数。这回答了你的问题吗？