Question

我在Jquery中有一个条形图，我想以角度重新创建。图表只是风格化的divs宽度设置为父级的百分比，如下所示

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

我想把它放在一个名为bar-graph的指令中，以便像

一样使用

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

哪会产生宽度为父母的85％的div

编辑：我在Angularjs adjust width based on parent element width

找到了解决方案

Answer 1

你所追求的是指令。 like this question on stackoverflow 以下是AngularJS的creating directives链接

Answer 2

以下是我的解决方案，如果其他人需要帮助

    (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);

在angular.js中将div的宽度设置为父级的百分比

2 个答案: