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
– Petr Averyanov, Commented Apr 20, 2022 at 14:34

Kinglish · Accepted Answer · 2022-04-20 15:44:39Z

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>

Collectives™ on Stack Overflow

Data not getting parsed in custom directive for angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related