Angular 1.x Directive With A Template - angularjs

Question

I'm trying to create an angular directive for forming sentences. The goal is to take a list and iterate through them as necessary. The result of the directive would be something like:
shoes, pants and socks
or
shoes, pants and +5 more
I have the basic directive setup to work with a array of strings - but I'd like to customize it to allow custom templates for each sentence element (i.e. hyperlinks, styling, etc). That is:
<sentence values="article in articles">
<strong>{{article.title}}</strong> by <span>{{article.author}}</span>
</sentence>
The HTML the user sees in the browser needs to be something like:
$scope.articles = [
{ title: '...', author: '...'},
{ title: '...', author: '...'},
...
]
<span><strong>ABC</strong> by <span>123</span></span>
<span>, </span>
<span><strong>DEF</strong> by <span>456</span></span>
<span>and</span>
<span>+5 more</span>
I'm guessing it has something to do with transclude but cannot figure out the API. I've also experimented with using ng-repeat instead of the directive template but wasn't able to find a solution.

Answer 1

Something like this should work where maxArticles is a number defined on your scope
<sentence values="article in articles | limitTo: maxArticles">
<strong>{{article.title}}</strong> by <span>{{article.author}}</span>
<span ng-if="$index < maxArticles - 2">, </span>
<span ng-if="$index === articles.length - 1 && articles.length <= maxArticles">and</span>
</sentence>
<span ng-if="articles.length > maxArticles">
and +{{articles.length - maxArticles}} more.
</span>

Answer 2

Iterating AND providing dynamic content is a common use for a custom directive with the compile function + the $compile service. Watch out: essentially you are repeating the functionality of ng-repeat, you may want to consider alternatives.
E.g. instead of the articles list, use another one (perhaps named articlesLimited). The new list is constructed dynamically and contains the first elements from articles. A flag (e.g. hasMore) indicates whether the original articles has more elements, simply as: $scope.hasMore = articles.length > 5. You use the hasMore flag to show/hide the "+N more" message.
For what it's worth however, below is an implementation of the sentence directive. See the comment for weak points!
app.directive('sentence', ['$compile', function($compile) {
var RE = /^([a-z_0-9\$]+)\s+in\s([a-z_0-9\$]+)$/i, ONLY_WHITESPACE = /^\s*$/;
function extractTrimmedContent(tElem) {
var result = tElem.contents();
while( result[0].nodeType === 3 && ONLY_WHITESPACE.test(result[0].textContent) ) {
result.splice(0, 1);
}
while( result[result.length-1].nodeType === 3 && ONLY_WHITESPACE.test(result[result.length-1].textContent) ) {
result.length = result.length - 1;
}
return result;
}
function extractIterationMeta(tAttrs) {
var result = RE.exec(tAttrs.values);
if( !result ) {
throw new Error('malformed values expression, use "itervar in list": ', tAttrs.values);
}
var cutoff = parseInt(tAttrs.cutoff || '5');
if( isNaN(cutoff) ) {
throw new Error('malformed cutoff: ' + tAttrs.cutoff);
}
return {
varName: result[1],
list: result[2],
cutoff: cutoff
};
}
return {
scope: true, // investigate isolated scope too...
compile: function(tElem, tAttrs) {
var iterationMeta = extractIterationMeta(tAttrs);
var content = $compile(extractTrimmedContent(tElem));
tElem.empty();
return function link(scope, elem, attrs) {
var scopes = [];
scope.$watchCollection(
function() {
// this is (IMO) the only legit usage of scope.$parent:
// evaluating an expression we know is meant to run in our parent
return scope.$parent.$eval(iterationMeta.list);
},
function(newval, oldval) {
var i, item, childScope;
// this needs OPTIMIZING, the way ng-repeat does it (identities, track by); omitting for brevity
// if however the lists are not going to change, it is OK as it is
scopes.forEach(function(s) {
s.$destroy();
});
scopes.length = 0;
elem.empty();
for( i=0; i < newval.length && i < iterationMeta.cutoff; i++ ) {
childScope = scope.$new(false, scope);
childScope[iterationMeta.varName] = newval[i];
scopes.push(childScope);
content(childScope, function(clonedElement) {
if( i > 0 ) {
elem.append('<span class="sentence-sep">, </span>');
}
elem.append(clonedElement);
});
}
if( newval.length > iterationMeta.cutoff ) {
// this too can be parametric, leaving for another time ;)
elem.append('<span class="sentence-more"> +' + (newval.length - iterationMeta.cutoff) + ' more</span>');
}
}
);
};
}
};
}]);
And the fiddle: https://jsfiddle.net/aza6u64p/

Answer 3

This is a tricky problem. Transclude is used to wrap elements but when using transclude you don't have access to the directive scope, only to the scope of where the directive is being used:
AnglularJS: Creating Custom Directives
What does this transclude option do, exactly? transclude makes the contents of a directive with this option have access to the scope outside of the directive rather than inside.
So a solution is to create another component to inject the template's scope inside the directive, like this:
.directive('myList', function() {
return {
restrict: 'E',
transclude: true,
scope: { items: '=' },
template: '<div ng-repeat="item in items" inject></div>'
};
})
.directive('inject', function() {
return {
link: function($scope, $element, $attrs, controller, $transclude) {
$transclude($scope, function(clone) {
$element.empty();
$element.append(clone);
});
}
};
})
<my-list items="articles">
<strong>{{item.title}}</strong> by <span>{{item.author}}</span>
</my-list>
This was taken from this discussion: #7874
And I made a Plnkr.