帶有html5數據標簽的角度表達式

Question

我是Angularjs和學習的新手。 我正在嘗試構建一個調用api服務以獲取值並在儀表板中對其進行更新的應用。

html代碼如下

<div class="span3" ng-controller="rookieController">
<div class="chart" ng-attr-data-percent="{{count}}"> {{count}} </div>
<div class="chart-bottom-heading"><span class="label label-info">Rookie</span>
</div>

結果是

“ {{count}}”在外部HTML中被評估為一個值，但內部html中的“ {{count}}”未被評估。 我調試了代碼，添加斷點后，innerHTML“ {{count}}”得到了評估。

這有點令人困惑。 我認為這是因為在渲染innerHTML時未加載數據，但是后來我嘗試評估表達式方式，然后在此標記中調用它並對其進行完美評估。 然后，數據加載理論沒有加起來。

實際上，數據百分比值是作為easypiechart jquery的輸入給出的，因為jquery在數據可用之前觸發，因此不會進行動畫處理。

有人可以解釋整個渲染過程如何工作。 任何幫助將不勝感激。

控制器代碼，

opsApp.controller('rookieController',function($scope,$http) {

    $http.get('/api/rookieCount')
        .success(function(data) {

                    $scope.count = data;
                    console.log(data);

        })
        .error(function(data) {
            console.log('Error: ' + data);
        });

});

更新：對指令進行評估的Jquery，

 $.easyPieChart = function(el, options) {
          var addScaleLine, animateLine, drawLine, easeInOutQuad, renderBackground, renderScale, renderTrack,
            _this = this;
          this.el = el;
          this.$el = $(el);
          this.$el.data("easyPieChart", this);
          this.init = function() {
            var percent;
            _this.options = $.extend({}, $.easyPieChart.defaultOptions, options);
            percent = parseInt(_this.$el.data('percent'), 10);

線

百分比= parseInt（_this。$ el.data（'percent'），10）;

是要評估屬性的位置。

Answer 1

應該是這樣的：

<div class="chart" ng-attr-data-percent="count"> {{count}} </div>

Answer 2

更新：

我有一個問題：實際上是角度控制器延遲加載數據。

1. HTML的GET被觸發，HTML渲染開始
2. 我定義了角度應用程序，然后在<div>周圍定義了角度控制器。 控制器為API觸發GET
3. 現在，在控制器可以將數據返回到$ scope之前，將調用圖表的jquery，並且它會看到表達式{{count}}的未定義值

丑陋的駭客：我使用setTimeout函數調用jquery之后觸發了大約500毫秒。 我知道這很丑陋，但是由於我現在正在學習有角度的東西，所以我還不太了解$ q和$ promise。 即使有人可以提出一些優雅的解決方案，我也會很高興。 謝謝大家的幫助。 欣賞它。