Creé una directiva personalizada en la que analizo la información usando el atributo de datos, pero el valor del atributo de datos es nulo.
Código de invocación de la directiva:
<processInfo data="{{self.processInfo}}" type="application_topology_view"></processInfo>Código de directiva:
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); }Para console.log(attrs.data) obtengo una cadena vacía.
Los datos que estoy analizando inicialmente se obtienen de una API, por lo que tal vez eso pueda estar causando un problema ya que los datos no se cargan mientras el elemento processInfo ya se procesa.
Cualquier ayuda será apreciada.
Su directiva no fue escrita correctamente. Necesita devolver el objeto. Además, como se mencionó, debe pasar sus datos personalizados a través de variables de alcance y analizarlos en un controlador, no en un enlace. Por favor vea esta muestra.
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>