javascript - angularjs 和范围问题(我认为)

Question

我是 Angular 新手，我一直在尝试制定一个非常高级的指令。大多数指令都有效，但目前存在两个问题，我认为它们都与范围有关。

这是我的指令:

angular.module('test')
    .directive('testKitDesigner', function () {
        panels = [];

        function bindEvents() {
            console.log("bindingEvents");

            var styledElements = ["piping", "panel-1", "panel-2", "panel-3", "panel-4", "panel-5", "panel-6", "panel-7", "panel-8", "panel-9", "panel-10"];

            for (var i = 0; i < styledElements.length; i++) {
                var target = document.getElementById(styledElements[i]);

                console.log(target);

                if (target) {
                    bindEvent(target);
                }
            }
        };

        function bindEvent(target) {
            console.log(target);

            target.bindEvent("ngClick", selectPanel);
        };

        function selectPanel(event) {
            var path = angular.element(event.target);

            panels = []; // Reset

            if (attrs.testKitDesigner && attrs.testKitDesigner === 'advanced') {
                panels.push(path);
            } else {
                var parent = path.parent();
                var paths = parent.children();

                for (var i = 0; i < paths.length; i++) {
                    var current = angular.element(paths[i]);
                    var tag = current[0].nodeName;

                    if (tag === 'path' || tag === 'polyline') {
                        panels.push(current);
                    }
                }

                console.log(panels.length);
            }
        };

        return {
            restrict: 'A',
            templateUrl: 'Views/Templates/designer.html',
            link: function (scope, element, attrs) {
                scope.step = 0;
                scope.sport = 'General';
                scope.garment = 'Dress';
                scope.design = 'Angelus';

                scope.nextStep = function () {
                    scope.step++;
                };

                scope.setSport = function (sport) {
                    scope.sport = sport;

                    scope.setSvg();
                    scope.nextStep();
                };

                scope.setGarment = function (garment) {
                    scope.garment = garment;

                    scope.setSvg();
                    scope.nextStep();
                };

                scope.setDesign = function (design) {
                    scope.design = design;

                    scope.setSvg();
                    scope.nextStep();
                };

                scope.setSvg = function () {
                    var children = element.children();
                    var template = scope.sport + '/' + scope.garment + '/' + scope.design;

                    for (var i = 0; i < children.length; i++) {
                        var child = angular.element(children[0]);

                        if (child.hasClass('base')) {
                            child.attr('test-svg', template);
                            bindEvents();

                            return;
                        }
                    }
                }

                scope.setColor = function (color) {
                    for (var i = 0; i < panels.length; i++) {
                        var panel = angular.element(panels[i]);
                        var parent = panel.parent();

                        if (parent.attr('id') === 'piping') {
                            panel.css({
                                'stroke': color
                            });
                        } else {
                            panel.css({
                                'fill': color
                            });
                        }
                    }
                };

                scope.init = function () {
                    bindEvents();
                };

                scope.init(); // Set our defaults;
            }
        }
    })
    .directive('testSvg', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                scope.contentUrl = 'Views/Templates/' + attrs.testSvg + '.svg';
                attrs.$observe('testSvg', function () {
                    console.log(attrs.testSvg);
                    scope.contentUrl = 'Views/Templates/' + attrs.testSvg + '.svg';
                });
            },
            template: '<div ng-include="contentUrl"></div>'
        };
    });

设计器模板如下所示:

<div class="base" test-svg="/General/Polo/Angelus">

</div>
<div class="options">
    <h1>Simple kit designer</h1>

    <div ng-hide="step != 0">
        <p>Choose your sport.</p>

        <ul class="list-unstyled">
            <li><a href ng-click="setSport('Netball');">Netball</a></li>
            <li><a href ng-click="setSport('General');">General</a></li>
        </ul>
    </div>

    <div ng-hide="step != 1">
        <p>Choose your garment.</p>

        <ul class="list-unstyled">
            <li><a href ng-click="setGarment('Dress');">Dress</a></li>
            <li><a href ng-click="setGarment('Polo');">Polo</a></li>
        </ul>
    </div>

    <div ng-hide="step != 2">
        <p>Choose your design.</p>

        <ul class="list-unstyled">
            <li><a href ng-click="setDesign('Angelus');">Angelus</a></li>
        </ul>
    </div>

    <div class="colors" ng-hide="step != 3">
        <p>Click an area to change the colour.</p>

        <ul id="colour-picker" ng-hide="!picking" class="colours">
            <li><a class="colour-red" href ng-click="setColor('red');"></a></li>
            <li><a class="colour-orange" href ng-click="setColor('orange');"></a></li>
            <li><a class="colour-yellow" href ng-click="setColor('yellow');"></a></li>
            <li><a class="colour-green" href ng-click="setColor('green');"></a></li>
            <li><a class="colour-blue" href ng-click="setColor('blue');"></a></li>
            <li><a class="colour-indigo" href ng-click="setColor('indigo');"></a></li>
            <li><a class="colour-violet" href ng-click="setColor('violet');"></a></li>
        </ul>
    </div>
</div>

现在，应该发生的是，当用户选择一项运动、服装或设计时，test-svg属性应该更改为新值，然后相关的 svg 将被加载。属性确实发生变化，但observe函数永远不会被调用。我确信这与范围有关，但我无法弄清楚。

Answer 1

您将在 test-kit-designer 的链接阶段添加 test-svg 属性。 test-svg 属性未编译为指令，因此不会触发 $observe，请阅读 $compile 来解决您的问题。

但是，我建议重组您的代码。考虑在模板中使用 test-svg，从 test-kit-designer 中的 setSvg 公开模板，并将其双向绑定(bind)到另一个变量测试-svg。