Как разрешить угловую область Переменная внутри класса Div

<div class="progressMain"> 
    <div class="stocking progressWrap progress" data-progress-percent="33"> 
     <div class="progressBar progress stocking"></div> 
     <div class="progressText">In Progress 3 of 7 steps</div> 
    </div> 
</div>

У меня есть значение процента прогресса данных в моей области директивы, но я не уверен, как я могу разрешить значение области внутри data-progress-percent. Я пробовал data-progress-percent = {{значение}}, но это не сработало. Любая идея, как я могу разрешить переменную области видимости внутри div-класса?Как разрешить угловую область Переменная внутри класса Div

источник

2015-05-28 Aamir Khan

Использование $timeout(). Это решит вашу проблему. $timeout() будет работать в следующем цикле $digest.

источник

2015-05-28 12:26:07

- это проблема с таймаутом $? Я хочу разрешить угловую переменную внутри класса div. –

это не проблема с таймаутом $. Любые изменения, которые вы внесли в $ timeout, будут выполняться в конце цикла $ digest. Поэтому, если вы хотите закончить цикл сначала, вы можете его использовать, когда использование $ timeout сделает вас петли –

Имейте переменную scope в вашем контроллере, которая будет передана вашему directive. Затем используйте директиву template, чтобы отобразить процентное значение (может быть после некоторых вычислений в функции вашей директивной ссылки).

DEMO - http://plnkr.co/edit/8DZzSjcpDqRworpxQrAs

HTML:

<body ng-app="myApp" ng-controller="myController"> 
    <div class="progressMain"> 
     <div class="stocking progressWrap progress" progress-percent="percentValue"> 
     </div> 
    </div> 

    <br/><br/> 
    <div>Enter percentage value to be passed to directive and used as in directive template:</div> 
    <br/> 
    <input type="text" ng-model="percentValue" /> 
</body>

JS:

var app = angular.module('myApp', []); 
app.controller('myController', function ($scope) { 
    $scope.percentValue = 33; 
}); 

app.$inject = ['$scope']; 

app.directive('progressPercent', function() { 
    return { 
      restrict: 'A', 
      template: '<div class="progressBar progress stocking"></div><div class="progressText">In Progress {{percentValue}} steps</div>' 
    }; 
});

Надеется, что это помогает.

источник

2015-05-28 12:54:48 softvar

Если это помогает, не забудьте принять его, пожалуйста! ;) – softvar

Как разрешить угловую область Переменная внутри класса Div

ответ

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