After setting up the directive below:
angular.module('news.directives', [])
.directive('newsArticle', function($location, $timeout) {
return {
restrict: 'AE',
replace: 'true',
templateUrl: 'partials/pages/news/directives/article.html',
scope: true
};
});
As well as using this template:
<div id="story-{{item.id}}" ng-class="{'red': item.active, 'story-container': true}">
<div class="story-banner-image"></div>
<div class="story stationary">{{ item.title | words: 10 }}</div>
<div class="story-banner-content"></div>
</div>
And calling the directive like this:
<news-article ng-repeat="item in news">
</news-article>
The setup works perfectly. However, when attempting to implement an isolated scope and expose either a single item or all news items:
scope: {
item: '@'
}
// or
scope: {
news: '@'
}
// or
scope: {}
The {{item.property}} tags within the template come back as null values. The question arises - why does the isolated scope not recognize the 'item' variable?