Data not getting parsed in custom directive for angularjs

Question

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.

What is version of angularjs u use? Components not supported yet? Why u pass parameter in such akward way not using scope bindings? — Petr Averyanov, Apr 20 '22 at 14:34

score 1 · Accepted Answer · answered Apr 20 '22 at 15:44

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>

Data not getting parsed in custom directive for angularjs

1 Answers1