AngularJS - apply custom class directive to ng-repeat items

Question

AngularJS - apply custom class directive to ng-repeat items

I'm trying to set the width of a div dynamically via 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>

with the following directive

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

But nothing is happening. I try to "console.log" within the "link:function.." but nothing gets printed. What am I missing here?

Thanks for your time.

javascript
angularjs

Answer 1

Directive definitions use camelCase:

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

Directive docs

In AngularJS, camel case (lowerCamelCase) is used when defining directives and accessing attributes (from within the directive), and snake case (dash-case- whatever you want to call it) is used for referencing the directives and/or attributes in HTML elements.