How to access directive's controller variables in directive's template?

Question

How to access directive's controller variables in directive's template?

2.5k views Asked by shahidbits At 16 September 2024 at 09:53

Need to use variable (defined inside the controller element of directive) in the template element.

angular.module('home').directive('mediaTile', function(){
 return {
  restrict: "AE",
  replace: 'true',
  scope: {
   media: '=',
   displayFilter: '='
  },
  controller: function($scope){
   var vm = this;
            vm.mediaImageActual = 'img/large-tiles.png';            }
  },
  controllerAs: 'vm',
  template:  '<div>' +
     '<img preload-image ng-src="{{vm.mediaImageActual}}">' +
     '</div>'
 };
});

<div media-tile display-filter="view.displayFilter" media="dataList.lists[0]"></div>

ng-src is not getting the proper value i.e vm.mediaImageActual.

I have tried online solutions like this but unable to resolve the issue. Whats wrong ?

Original Q&A

There are 2 answers

**Developer** · Answer 1 · 2016-12-29 18:10:41

Try setting bindToController: true in the directive.

You can find more details here

Use bindToController alongside controllerAs syntax, which treats Controllers as Class-like Objects, instantiating them as constructors and allowing us to namespace them once instantiated

If your are using angularJs1.6 or above, you can use component instead of directive which has all these properties set by default

**Ram_T** · Answer 2 · 2016-12-29 18:20:26

script.js

var app = angualr.module('app', []);
app.directive('mediaTile', function(){
return {
    restrict: "AE",
    replace: 'true',
    scope: {
        media: '=',
        displayFilter: '='
    },
    controller: function($scope){
        var vm = this;
        vm.mediaImageActual = 'img/large-tiles.png';
    },
    controllerAs: 'vm',
    template: '<div>{{vm.mediaImageActual}}"' +
                '</div>'
};
});

HTML

<!DOCTYPE html>
<html data-ng-app="app">
<head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
<div media-tile displayFilter="view.displayFilter" media="dataList.lists[0]"></div>
</body>

</html>

TechQA.

How to access directive's controller variables in directive's template?

There are 2 answers

Related Questions in ANGULARJS

Related Questions in ANGULARJS-DIRECTIVE

Related Questions in ANGULARJS-CONTROLLERAS

Popular Questions

Popular Tags

Trending Questions