Question

What is the difference between controller and link in directives

Answer 1

Answer:

Just get rid of the link function entirely. You can set the background-image in the template with ng-style, and then you have one less function to worry about:

.my-card(ng-style='{"background-image": "url(" + card.item.image_url + ")"}', ng-class='card.cardClass')

 button(ng-click='card.toggle()')

 .my-card-content(ng-show='card.item.showMore')

   h1 {{::card.item.name}}

 .my-card-more(ng-show='!card.item.showMore')

 .my-card-bg

If you want to build up the url(card.item.image_url) string in the controller for easier testing, you can still use ng-style to apply the resulting variable. For example:

function MyCardCtrl() {

 var vm = this;

 vm.backgroundUrl = 'url("' + vm.item.image_url + '")';

 vm.cardClass = 'my-card-' + vm.item.type;

 vm.toggle = function() {

   vm.item.showMore = !vm.item.showMore;

 };

}

Also, if you're on Angular 1.5+, this directive can be written even more simply as a component:

angular

 .module('components')

 .component('myCard', {

   bindings: {

     item: '<'

   },

   templateUrl: 'my-card.html',

   controller: 'MyCardCtrl',

   controllerAs: 'card'

 })

 .controller('MyCardCtrl', [MyCardCtrl]);

Answer 2

Answer:The link option is just a shortcut to setting up a post-link function. controller: The directive controller can be passed to another directive linking/compiling phase. It can be injected into other directices as a mean to use in inter-directive communication.

Explanation: