AngularJS: Trouble with directive recognizing attribute

Question

AngularJS: Trouble with directive recognizing attribute

I am currently working with a directive called ngAvatar:

app.directive('ngAvatar', function() {
  return {
    restrict: 'E',
    replace: true,
    template: '<img class="avatar-medium" ng-src="{{url}}" />',
    link: function(scope, elem, attrs) {
      console.log(attrs);
      var aType = attrs.avatarType;
      var aId = attrs.avatarId;
      console.log("Type: "+ aType);
      console.log("Character ID:"+ aId);
      var baseUrl = "http://api-character.com/";
      switch(aType){
        case "character":
          scope.url = baseUrl + "Character/"+aId+"_256.jpg";
      }
    }
  }
});

However, I am encountering an issue where the directive does not seem to recognize the avatar_id within it. Despite logging the attributes:

console.log("Type: "+ aType);
console.log("Character ID:"+ aId);

In my view, I have implemented the directive as follows:

<ng-avatar avatar_type="character" avatar_id="{{character.character_id}}"></ng-avatar>

When checking the Chrome Console for output, the avatar_id appears blank even though the attribute is present in the attrs. It just doesn't display in the directive code.

Chrome Console:

If anyone has any insights on why this isn't working correctly, your help would be greatly appreciated.

Thank you

javascript angularjs angularjs-directive directive

Answer 1

Answer №1

There are multiple approaches to resolving this issue.

Implementing a one-time watch: You may also explore the option of utilizing a two-way bound isolated scoped directive.

   link: function(scope, elem, attrs) { 
      //Establish watch
      var removeWatch = scope.$watch(attrs.avatarId, function(value){
        if(value){
          removeWatch();
          initialize();
        }
      });
     function initialize(){
       //Perform initialization tasks here
     }
   }

and include it as:

   <ng-avatar avatar-type="character" avatar-id="character.character_id"></ng-avatar>

Utilize attribute observation:

  link: function(scope, elem, attrs) { 
      //Set up watch
      var removeWatch = attrs.$observe(attrs.avatarId, function(value){
        if(value){
          removeWatch();
          initialize();
        }
      });
     function initialize(){
       //Perform initialization tasks here
     }
  }

and utilize it with

 <ng-avatar avatar-type="character" avatar-id="{{character.character_id}}"></ng-avatar>

Bind promise/data:

  app.directive('ngAvatar', function($q) {
   //...
   link: function(scope, elem, attrs) { 
      //Set up watch
     $q.when(scope.$eval(attrs.character)).then(initialize); 

     function initialize(character){
       var id = character.id;
       //Perform initialization tasks here
     }
    }
  }

and include it as

 <ng-avatar avatar-type="character" avatar-id="characterPromiseOrCharObject"></ng-avatar>

Using an event bus:

You can simply utilize the angular event bus and broadcast an event from the controller indicating the data is ready such as char_loaded, then listen for the event in the directive using scope.$on and trigger initialization once received.

Answer 2

There are multiple approaches to resolving this issue.

Implementing a one-time watch: You may also explore the option of utilizing a two-way bound isolated scoped directive.

   link: function(scope, elem, attrs) { 
      //Establish watch
      var removeWatch = scope.$watch(attrs.avatarId, function(value){
        if(value){
          removeWatch();
          initialize();
        }
      });
     function initialize(){
       //Perform initialization tasks here
     }
   }

and include it as:

   <ng-avatar avatar-type="character" avatar-id="character.character_id"></ng-avatar>

Utilize attribute observation:

  link: function(scope, elem, attrs) { 
      //Set up watch
      var removeWatch = attrs.$observe(attrs.avatarId, function(value){
        if(value){
          removeWatch();
          initialize();
        }
      });
     function initialize(){
       //Perform initialization tasks here
     }
  }

and utilize it with

 <ng-avatar avatar-type="character" avatar-id="{{character.character_id}}"></ng-avatar>

Bind promise/data:

  app.directive('ngAvatar', function($q) {
   //...
   link: function(scope, elem, attrs) { 
      //Set up watch
     $q.when(scope.$eval(attrs.character)).then(initialize); 

     function initialize(character){
       var id = character.id;
       //Perform initialization tasks here
     }
    }
  }

and include it as

 <ng-avatar avatar-type="character" avatar-id="characterPromiseOrCharObject"></ng-avatar>

Using an event bus:

You can simply utilize the angular event bus and broadcast an event from the controller indicating the data is ready such as char_loaded, then listen for the event in the directive using scope.$on and trigger initialization once received.

AngularJS: Trouble with directive recognizing attribute

Answer №1

Similar questions

I encountered a TS error warning about a possible null value, despite already confirming that the value

Conceal a designated column within a material angular data table based on the condition of a variable

When the document is fully loaded and processed, a script will be executed immediately following

Randomize elements with the click of a button

dynamic variable to store user input (Meteor)

Exporting Data from AngularJS UI-Grid to Excel: A Step-by-Step Guide

What is the best way to detect clicks on numerous images?

The Discord bot seems to be stuck in time, relentlessly displaying the same start time without any updates in between. (Built with Node.js and Javascript

Encountering an ongoing problem with trial repetition in JsPsych, which is causing the looping to continue endlessly without

Tips for displaying tooltips with values that are constantly updating

Can you explain the purpose and function of stub.callsArg(index) feature in Sinon.JS?

Alerting old session data following an AJAX request

The Dropdown Menu is displaying correctly in Chrome, but is being obscured by an image in Safari

Creating a unique 'full height' feature for the Material UI Dialog modal component

What is the proper way to employ if and else if statements within Angular2?

Looking for a solution to display PHP AJAX errors in my jQuery script?

A problem occurred while compiling the 'SharedModule' template: The expression form is not compatible with the current system

Issue with triggering a modal while simultaneously closing another one

Pass data from a child controller to its parent using $emit

Having trouble with changing the state within an AngularJS (Ionic Framework) controller?