Set a width of a div as a percentage of parent in angular.js

Question

I have a bar graph in Jquery that I want to recreate in angular. The graph is just stylized divs thats width are set to a percentage of the parent as shown below

$('.item-skills').each(function(){
  newWidth = $(this).parent().width() * $(this).data('percent');
  $(this).width(newWidth);
});

I want to put this in a directive called bar-graph to use like

<div bar-graph="0.85"></div>

Which would produce a div thats width is 85% of the parents

Edit: I found a solution here Angularjs adjust width based on parent element width

Answer 1

What you are after is a directive. like this question on stackoverflow Here is a link to creating directives from AngularJS

Answer 2

Here is my solution below if anyone else needs help

    (function(angular) {

      var
        definitions;

      definitions = [
        niBargraph
      ];

      angular.module('ni.Bargraph').directive('niBargraph', definitions);

      function niBargraph() {

        return {
          scope: {
            percent: '@niBargraph'
          },
          link: setSize
        };

        function setSize(scope, elm, attrs, ctrl) {
            elm.css({
                width: elm.parent()[0].offsetWidth * parseFloat(scope.percent)
            });
        }
      }
    })(angular);