Trying to understand the proper usage of the link function within Angular directives.
Imagine having a directive like the one below:
app.directive("lbArticle", function() {
return {
restrict : "E",
templateUrl: 'tpl/directives/information/article.html',
scope: {
article: '='
},
link: function(scope,element, attr){
scope.info = attr.article;
}
};
});
Now let's pass an object to the article attribute in the HTML
<lb-article article='{{myObject}}'> </lb-article>
When the directive is rendered, it should assign the value of myObject to a variable named info
For example, if myObject is defined as follows:
myObject{name: 'Hello', created: '2015-04-04'; }
Then the variables should be displayed like this:
HTML from my directive
<span class="block text-ellipsis">{{info.name}}</span>
<small class="text-muted">{{info.created | fromNow}}</small>
However, what if this doesn't work?
From what I've gathered in the documentation, the link function is typically used for DOM manipulation and setting up variables that may need to be accessed before the actual directive rendering takes place.