Binding an Angular Directive property to a parent Controller

Question

In the ma-resource-text-watch Directive I make an api call to get a list of resource texts. I want to be able to hide the alert-component if the api doesn't return any resource texts. Does anyone know how I might be able to do this?

<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

You can have your directive take in a callback (or expression), which it will fire when the data is loaded. For example, in the directive definition, the scope property can have:

scope: {
  onTextsLoaded: '&'
}

The directive can then call:

scope.onTextsLoaded({ texts: yourTexts })

And the parent controller can pass in an expression as a callback, and use ng-show to hide the alert-component :

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

With the function defined like:

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