[英]Binding an Angular Directive property to a parent Controller
In the ma-resource-text-watch Directive I make an api call to get a list of resource texts. 在ma-resource-text-watch指令中,我进行了api调用以获取资源文本列表。 I want to be able to hide the alert-component if the api doesn't return any resource texts.
如果api不返回任何资源文本,我希望能够隐藏警报组件。 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>
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
属性可以具有:
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
: 父控制器可以将表达式作为回调传递,并使用
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>
With the function defined like: 函数定义如下:
$scope.onTextsLoaded = function(texts) {
$scope.dataIsLoaded = true;
$scope.texts = texts;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.