I have created a directive called 'filterComponent' with the following code:
app.directive('filterComponent', function() {
return {
restrict: 'E',
templateUrl: 'filter-component.html',
link: function(scope, element, attrs) {
console.log(attrs);
scope.type = attrs["type"];
}
};
});
This directive is used three times in different places in my HTML like this:
<filter-component type="TYPE1"></filter-component>
<filter-component type="TYPE2"></filter-component>
<filter-component type="TYPE3"></filter-component>
The content of the directive's HTML template is as follows:
<div id="{{type}}" class="filter-container">
<div layout="row" class="rhs-text" ng-show="!noTargetSelectedYet">
<md-input-container flex="">
<label>Search</label>
<input style="position: relative; top: 7.8px;" ng-model="filterText">
</md-input-container>
</div>
</div>
The issue I am facing is that although I pass different values for the attribute 'type' in each usage of the directive, the 'id' attribute becomes the same (specifically the last value, 'TYPE3'). This behavior can be seen in the console log messages as well.
What could possibly be causing this problem?