Using AngularJS to add a unique custom class directive to each item in an ng-repeat loop

Question

Using AngularJS to add a unique custom class directive to each item in an ng-repeat loop

Can anyone help me figure out why the width of a div isn't being set dynamically using AngularJS?

<ul id="contents">
  <li ng-repeat="content in contents">
    <div class="content_right custom_width">
      <div class="title">{{content.title}}</div>
    </div>
  </li>
</ul>

I have the following directive set up:

myApp.directive("custom_width", function() {
  return {
    restrict:"C",
    link: function(scope, element, attrs) {
      element.css("width", 400);
    }
  }
});

No errors are showing up and the console.log I added doesn't seem to be working. Any ideas on what could be causing this issue?

Thank you for your assistance.

javascript angularjs

Answer 1

Answer №1

When working with directive definitions in AngularJS, camelCase is the way to go:

myApp.directive("customWidth", function() {
  return {
    restrict:"C",
    link: function(scope, element, attrs) {
      element.css("width", 400);
    }
  }
});

Check out the Directive docs

In AngularJS, directives and attributes are defined using camelCase (lowerCamelCase), while referencing them in HTML elements uses snake case (dash-case or kebab-case).

Answer 2

When working with directive definitions in AngularJS, camelCase is the way to go:

myApp.directive("customWidth", function() {
  return {
    restrict:"C",
    link: function(scope, element, attrs) {
      element.css("width", 400);
    }
  }
});

Check out the Directive docs

In AngularJS, directives and attributes are defined using camelCase (lowerCamelCase), while referencing them in HTML elements uses snake case (dash-case or kebab-case).

Using AngularJS to add a unique custom class directive to each item in an ng-repeat loop

Answer №1

Similar questions

Only the (click) event is functional in Angular, while the (blur), (focus), and (focusout) events are not functioning

Send information from the textbox

What are the best practices for utilizing ESM only npm packages alongside traditional npm packages within a single JavaScript file?

Submitting an extremely large string to an Express server using JS

The model name should not be overridden if it is already being used in different fields

Tell me the permissions that a user possesses in discord.js

Error detected in JSON syntax... Where is it hiding?

Is there a way to consistently substitute a specific path parameter with a different value within node.js?

When the HTML and PHP code keeps running, the JavaScript text on the page updates itself

Experiencing Difficulty Retaining Checkbox State Using LocalStorage Upon Page Reload

Scroll bar malfunction in Highcharts

Understanding how to access POST content in Meteor.js is an important aspect

How can I pass the dynamically generated ID from PHP to AJAX/jQuery using an anchor tag?

Express npm dependency fails to start globally

Use JQuery to reverse the most recent button click

Step-by-step guide to implementing a sticky header while scrolling

Ways to address observables in Angular in a manner similar to deferred objects

Encountering a "args" property undefined error when compiling a .ts file in Visual Studio Code IDE

In AngularJS, what is the best way to add a filter inside another filter?

Is it possible to showcase content when double curly brackets are nested within another set of double curly brackets