將Angular Directive屬性綁定到父控制器

Question

在ma-resource-text-watch指令中，我進行了api調用以獲取資源文本列表。 如果api不返回任何資源文本，我希望能夠隱藏警報組件。 有誰知道我怎么能做到這一點？

<div ng-controller="IntroductionCntrl" class="hidden-print">
    <div class="container-fluid" ng-if="introductionResourceKey">
        <alert-component type="guidance">
            <span ma-resource-text-watch="{{introductionResourceKey}}"></span>
        </alert-component>
    </div>
</div>

Answer 1

您可以讓指令接受一個回調（或表達式），該回調將在加載數據時觸發。 例如，在指令定義中， scope屬性可以具有：

scope: {
  onTextsLoaded: '&'
}

該指令然后可以調用：

scope.onTextsLoaded({ texts: yourTexts })

父控制器可以將表達式作為回調傳遞，並使用ng-show隱藏alert-component ：

<alert-component ng-show="dataIsLoaded && texts.length">
    <span ma-resource-text-watch="{{introductionResourceKey}}" on-texts-loaded="onTextsLoaded(texts)"></span>
</alert-component>

函數定義如下：

$scope.onTextsLoaded = function(texts) {
    $scope.dataIsLoaded = true;
    $scope.texts = texts;
}