Угловые выражения с меткой данных html5

Я новичок в Angularjs и обучении. Я пытаюсь создать приложение, которое вызывает службу api, чтобы получить значение и обновить его на панели управления.Угловые выражения с меткой данных html5

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>

В результате,

'{{число}}' получает оценку до значения в outerhtml но '{{число}} 'В innerhtml не оценивается. Я отлаживал код, и когда я добавляю точку останова, получает оценку innerHTML '{{count}}'.

Это своего рода сбивает с толку. Я думаю, что это потому, что данные не загружаются при визуализации innerHTML, но затем я попытался оценить способ выражения до того, как он вызывается в этом теге, и он отлично оценивается. Тогда теория загрузки данных не складывается.

Фактически значение процента данных задается как вход в jQuery easypiechart, поскольку триггеры 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 $ эл. данные ('%'), 10);

Здесь атрибут получает оценку.

источник

2013-12-19 jperiasw

Что вы подразумеваете под внешним HTTML и внутреннимHTML? –

Я предполагаю, что ng-attr-data-percent - это директива, которую вы написали? В большинстве случаев, если директива не ожидает строки, вы не должны использовать двойные скобки. Т.е. большинство директив принимает модель somedir = model " –

@ExplosionPills - innerHTML - это текст в тегах html, а внешнийHtml означает между тегами – jperiasw

Это должно быть так:

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

источник

2013-12-19 14:47:41

Я тоже пробовал это, но он не работает. Как я уже говорил, это относится к способу, которым DOM сделанный Angular. Но это странно. 1. {{count}} до того, как мой предполагаемый html в теле будет правильно оценен 2. {{count}} внутри значения атрибута не оценивает bu t, когда я его отлаживаю, он загружается – jperiasw

Update:

У меня проблема: Это на самом деле угловой контроллер загрузки данных поздно.

ГЕТ для HTML увольняет и HTML-рендеринг начинается
Я определил угловое приложение, а затем угловой контроллер вокруг <div>. Контроллер запускает GET для API
Теперь перед контроллер может вернуть данные в $ объеме, то JQuery для диаграммы вызывается и он видит неопределенное значение для выражения {{счетчик}}

Уродливый взлом: я использовал функцию setTimeout, чтобы вызвать jquery для запуска примерно 500 мс. Я знаю, что это совершенно безобразно, но поскольку я сейчас изучаю углы, и я не совсем оборачивал голову вокруг обещаний $ q и $. Тем не менее, если кто-то может предложить некоторые изящные решения, я буду рад. Спасибо всем за помощь. Ценить это.

источник

2013-12-20 12:09:59 jperiasw

Угловые выражения с меткой данных html5

ответ

Смежные вопросы