Data not getting parsed in custom directive for angularjs

Issue

I have created a custom directive where i am parsing information using data attribute but value of data attribute is null.

Directive invoke code:

<processInfo data="{{self.processInfo}}" type="application_topology_view"></processInfo>

Directive code:

function processinfo(LocationService) {
        return {
            restrict: 'E',
            scope: {},
            templateUrl: 'k2-modules/js/directives/templates/processInfoTemplate.html',
            link: (scope, element, attrs) => {
                console.log(attrs.data);
                scope.processData = JSON.parse(attrs.data);
}

For console.log(attrs.data) i am getting empty string.

The data which I am parsing is initially getting fetched from an API, so maybe that can be causing issue as data is not loaded while processInfo element is already rendered.

Any help will be appreciated.

Solution

Your directive was not written correctly. It needs to return the object. Also, as mentioned, you should be passing in your custom data via scope variables and parsing them in a controller, not in link. Pls see this sample.

angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
    $scope.self = {
      processInfo: "processInfo-variable"
    };
    $scope.application_topology_view = "application_topology_view-variable";
  }]).directive('processinfo', function() {
    return {
      restrict: 'E',
      scope: {
        data: '=',
        type: '='
      },
      template: '<ul><li>data: {{data}}</li><li>type: {{type}}</li></ul>',
      controller: function($scope) {
      console.log("Here is where to parse your scope variables...", $scope.data)
      },
      link: (scope, element, attrs) => {
        console.log("This is just the text value of the attribute, rather than the parsed value", attrs.data);
        //scope.processData = JSON.parse(attrs.data);
      }
    }
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <processInfo data="self.processInfo" type="application_topology_view"></processInfo>
</div>

Answered By - Kinglish