Search code examples
angularjsangular-directive

AngularJS values not visible in directive and template- html

I have the following directive in html:

<as-excel-download institutionId="vm.reportInstitution.id"></as-excel-download>

the directive looks like this:

(function() {
'use strict';

angular
    .module('aposoft.common')
    .directive('asExcelDownload', asExcelDownload);

function asExcelDownload() {
    var directive = {
        restrict: 'E',
        scope: {                
            institutionId: '='
        },
        templateUrl: 'app/common/exceldownload/asExcelDownload.html'
    };
    return directive;

    ////////////
}
})();

and the directive template looks like this:

<a href="/api/schedulerecordexcel/monthreport/{{institutionId}}">
  <img src="./Excel.PNG" alt="icon" />
</a>

and actually I don't know why {{institutionId}} is emty in directive template html. If I change institutionId into vm in every of the above files (which is the scope in controller) and access institution id over vm in directive template html than everything works fine. Does anyone know what I am doing wrong here?

Solution

  • I think you are using wrong name as attribute, so basically this part:

    <as-excel-download institutionId="vm.reportInstitution.id"></as-excel-download>

    Should look like this:

    <as-excel-download institution-id="vm.reportInstitution.id"></as-excel-download>