Привязка свойства Angular Directive к родительскому контроллеру
В директиве 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>
@FrankModica, как и где мне объявить dataIsLoaded? Или как мне получить доступ к texts.length, если texts объявлен в директиве как локальная переменная?
Извините, я не понял структуру родитель-потомок. Похоже, что директива может принимать обратный вызов, который запускается при загрузке данных. Он может передавать текст (или только длину) этому обратному вызову. Тогда родитель будет знать, когда данные загружены и количество текстов.
@FrankModica Я только что посмотрел, и мне кажется, что это именно то, что я пытаюсь сделать! Вы хотите написать в качестве ответа, чтобы я мог дать вам интернет-очки?
Я перешел на ng-show, потому что, если мы будем использовать ng-if, директива вообще не будет создана. Возможно, вы захотите подумать о том, чтобы родительский контроллер выполнял вызовы API, но я не уверен, имеет ли это смысл в вашем случае.
Ответы 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;
}
ng-if = "texts.length"? Илиng-if = "dataIsLoaded && texts.length"?