I am working with a directive that looks like this:
.directive('myDirective', function() {
return {
restrict: 'AE',
replace: true,
templateUrl: '/myDirective.html?v=' + window.buildNumber,
link: function (scope, element, attrs) {
scope.itemClasses = attrs.itemClasses || '';
}
};
})
Its template is as follows:
<div class="my-directive">
<div class="items" ng-repeat="item in items">
<div class="item {{ itemClasses }}">{{ item.title }}</div>
</div>
</div>
This directive is being called in various places (once per template) like so:
<my-directive item-classes="col-md-6"></my-directive>
...
<my-directive item-classes="col-md-12"></my-directive>
All templates are rendering the same value for itemClasses, despite the link function setting different values (verified using console.log()). However, when I add the attribute scope: true to the directive's code, everything works fine. It appears that having its own inherited scope resolves the issue. Can you please explain this behavior?
Thank you.