Question

你好我是angularjs的新手，下面是我的html代码。

<div class="circular-bar" ng-repeat="cat1 in ['15']">
     <div class="chart" data-percent="{{cat1}}" data-bar-color="#e75200">              
          </div>
      </div>

在上面的代码饼图栏中颜色显示不错但在下面的代码栏颜色不显示。其中categorydata是动态来自数据库的对象。这里数据显示正确栏也显示但是下面没有显示酒吧填充颜色代码。

<div ng-repeat="cat in categorydata">
        <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 ">
            <!--circular-bar-->

        <div class="circular-bar">

            <div class="chart" data-percent="{{cat.offers.length}}" data-bar-color="#e75200" chart1>
                <label><span class="percent">{{cat.offers.length}}</span></label>

            </div>
        </div>
        <div class="clearfix"></div>

        <div class="offerssub clr1">
            <h3>{{cat.name}}</h3>
            <h4>Redeemed</h4>
            <span>0</span>
        </div>

    </div>
  </div>

这是我的angularjs指令。

app.directive('chart1', function() {
  return {
     restrict: 'AEC',
     scope: {
       data: '=',
       categorydata:'=categorydata'
     },
     link: function(elem, attr) {
       $(function() {
         //jQuery(elem).bar
          jQuery('.chart').easyPieChart({
               lineWidth:35,
               scaleColor:false,
               size:330,
               lineCap: 'square',

           });
       });
     }
  }
})

Answer 1

在指令中仅设置超时，以帮助您在填充数据后显示饼图。

当你在angularjs中使用任何jquery图表时，请使用以下代码使用超时。

app.directive('chart1', function() {
  return {
  //   restrict: 'A',
    /* scope: {
       data: '=',
       categorydata:'=categorydata'
     },*/
     link: function(elem, attr) {
       $(function() {
         //jQuery(elem).bar
         setTimeout(function () {
           jQuery('.chart').easyPieChart({
                lineWidth:35,
                scaleColor:false,
                size:330,
                lineCap: 'square',

            });
         }, 200);
       });
     }
  }
})

饼图的条形颜色不显示在angularjs ng-repeat

1 个答案: