HTTP调用设置的AngularJS指令参数

Question

因此，我有一个指令，其属性值是HTTP调用的结果。HTML看起来像这样：

<div class="kit-template" kd-kit="controller.kit.data" garment="childController.garment.data"></div>

问题在于服装属性。有时，服装属性为无效，这是可以预期的，因为它仍在执行HTTP请求。在其他指令中，我会做类似的事情：

if (garment) {
    // Execute some code
}

但是在此指令中，我有这样的代码：

// Create our svgPath
scope.svgPath = 'assets/garments/' + scope.garment.slug + '.svg';
// Function to execute after the svg has loaded
scope.loaded = function () {
    // For all our garments
    for (var i = 0; i < scope.kit.garments.length; i++) {
        // Get the current garment
        var garment = scope.kit.garments[i];
        // If we find the garment in question
        if (garment.slug === scope.garment.slug) {
            // Show our selected design
            showDesign(element, scope.kit);
            // Apply our colours
            applyColours(scope.kit, garment);
        }
    }
}

和指令模板看起来像这样：

<div ng-include="svgPath" onload="loaded()"></div>

所以我遇到的问题是，当SVG加载后，我执行了一些代码，这只会发生一次。如果服装为无效，则会丢失错误。我想做的就是延迟包含在衣服上。

。

有人知道我如何解决这个悖论？

Answer 1

如果您依赖garment.data，则可以简单地使用ng-if：

<div class="kit-template" 
     kd-kit="controller.kit.data" 
     garment="childController.garment.data"
     ng-if="childController.garment.data"></div>

将延迟指令的执行直到您拥有数据，到那时，您无需担心。