Hide the div section using custom directive - angularjs

Question

I have created a custom directive to show the error messages in the page. My directive is
app.directive('errorsection', function () {
return {
restrict: 'EA',
scope: {
errors: '=errors'
},
templateUrl: '..../shared/error-section.html'
};
});
error-section.html
<div ng-show="errors.length>0" class="error">
<div id="{{error.Id}}" ng-class="{'error':error.Type=='Error','alert-info alert-dismissible cssDataTargetDismiss-{{error.Id}} fade in':error.Type=='Info'}"
ng-repeat="error in errors track by $index">
<button ng-if="error.Type=='Info'" type="button" class="close" data-toggle="collapse" data-target=".cssDataTargetDismiss-{{alert.Id}}">×</button>
<p><strong ng-bind-html="error.TypeDescription"></strong><span ng-bind-html="error.Message"></span></p>
</div>
I have used this directive in one of my partial page to show the error messages
<div error-section errors="errorList"></div>
this errorList contains 2 messages . if i click the button, message is collapsed. I want to hide the div if all the error messages collapsed..
error messages is showing in view like below format,
______________
|error1 x|
|error2 x|
_______________
can anyone help how to hide the div?

Answer 1

try
<div ng-show="errors.length>0 && message !== 0">
<div id="{{error.Id}}" ng-class="{'error':error.Type=='Error','alert-info alert-dismissible cssDataTargetDismiss-{{error.Id}} fade in':error.Type=='Info'}"
ng-repeat="error in errors track by $index">
<button ng-click="message -= 1" ng-if="error.Type=='Info'" type="button" class="close" data-toggle="collapse" data-target=".cssDataTargetDismiss-{{alert.Id}}">×</button>
<p><strong ng-bind-html="error.TypeDescription"></strong><span ng-bind-html="error.Message"></span></p>
and in your directive controller take the length of the messages and give it to $scope.message.

Answer 2

Change your directive to use replace instead:
app.directive('errorsection', function () {
return {
restrict : 'EA',
scope : {
errors : '=errors'
},
replace: true, //tell it to replace
templateUrl : '..../shared/error-section.html'
};
});
This will make it so that
<div error-section errors="errorList"></div>
And
<div ng-show="errors.length>0" class="error">
Are the same div like this:
<div error-section errors="errorList error" ng-show="errors.length>0">
...
</div>
As opposed to:
<div error-section errors="errorList">
<div ng-show="errors.length>0" class="error">
...
</div>
</div>