Tips for Addressing Angular Scope Variable Within a Div's Class

Question

Tips for Addressing Angular Scope Variable Within a Div's Class

<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>

There is a challenge with resolving the scope value inside the data-progress-percent attribute in my directive. I attempted using data-progress-percent={{value}} but it was unsuccessful. Do you have any suggestions on how to successfully insert scope variables within the div class?

html css angularjs angular-directive

Answer 1

Answer №1

Ensure to have a scope variable stored in your controller so that it can be passed to your directive. Utilize the directive's template attribute to exhibit the percentage value (which could involve some calculations within the link function of your directive).

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>Input the percentage value to be sent to the directive and utilized within the 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>'
  };
});

Trust this provides clarity.

Answer 2

Ensure to have a scope variable stored in your controller so that it can be passed to your directive. Utilize the directive's template attribute to exhibit the percentage value (which could involve some calculations within the link function of your directive).

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>Input the percentage value to be sent to the directive and utilized within the 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>'
  };
});

Trust this provides clarity.

Answer 3

Answer №2

To address the issue at hand, implement the $timeout() function in your code. Executing $timeout() will happen during the subsequent $digest cycle.

Answer 4

To address the issue at hand, implement the $timeout() function in your code. Executing $timeout() will happen during the subsequent $digest cycle.

Tips for Addressing Angular Scope Variable Within a Div's Class

Answer №1

Answer №2

Similar questions

"Trouble ensues when OrbitControls fail to function properly while loading a

Password Reset Function Malfunctioning

Customize specific styles for individual divs one at a time (without the use of jQuery)

Update in slide height to make slider responsive

What are the best practices for maximizing the efficiency of bootstrap-sass?

Guide to changing the checkbox value using JavaScript

Delete the "img" and "a" elements from the content within the specified node

Switching from a click event to a hover event in JavaScript

Uploading files using AngularJS and the Java Play Framework

The floating left div displays oddly when it wraps onto the next line

Is there a way for me to access the response from the PHP file I'm calling with Ajax?

Selenium raised an exception of type InvalidSelectorException with the message stating that compound class names are not allowed as selectors

Troubleshooting: Fixed Header Issue in HTML5 Responsive Web Design

What's preventing my link from opening?

Accelerate blinking timer by utilizing CSS3 animations

The requested style from ' was denied due to its MIME type ('text/html') not being compatible with supported stylesheet MIME types, and strict MIME checking is enforced

Retrieve all the child elements belonging to the specified XML layer

Creating responsive designs for high resolution screens using media queries in HTML

The dynamic duo of AngularJS and Kendo UI

The event 'deviceorientation' does not seem to be firing in iOS browsers when it is referenced within an iFrame