Accessing constant in template in AngularJS?

Question

I have following code:

Javascript

var app = angular.module('myApp');

const TESTCONST = 'test 1';

app.constant("TEST", {
    "TEST1": "test 1"
});

pug

both of this

div(ng-click="changeMessageType(TESTCONST)") Test

and this, don't work:

div(ng-click="changeMessageType(TEST.TEST1)") Test

it will give me undefined.

What is the correct way to do it?

Answer 1

What is the correct way to do it?

Correct way is to set scope/controller properties with whatever you need to be available in template. So you need to inject your constant in controller and do something like this:

.controller('Controller', function($scope, TEST) {
  $scope.TEST = TEST
})

Answer 2

inject that constant inside your controller then you can use that and you are calling a function that belongs to controller, so in order to use that constant you have to inject hat value.

.controller('testctrl', function($scope, TEST) {})

Answer 3

To use angular constant in html template we have to first set it's values in $scope, than only we can use that scope variable in template.

For examle :

angular.module('abc',[])
.constant('abcConstant', function {
    return {
          recordType: {
             MIN : 1,
             FULL : 2
          }
      }
  }
)
.controller('abcController', abcController);

abcController.$inject = ['abcConstant', $scope];

function abcController(abcConstant, $scope){
   $scope.recordTypes = abcConstant.recordType;
   $scope.selectedRecordType = abcConstant.recordType.MIN;
   .....

 }

Now, in html template I can use:

 <div ng-if='selectedRecordType == recordTypes.MIN'>Min</div>