Controlling multiple DOMS with Angular Directive?

Question

I'm fairly new to angular and I want to create a directive looking like this in AngularJS:

My approach is to make a template with something like:

progress-bar.html

<div class="container">
   <div class="progress-line"></div>
</div>
<div class="current"> 11min </div>
<div class="max"> 24min </div>

Then use css to make the graphics and some javascript in the link/compile function of the directive to move the markers ("11min" and "24min") to the right positions, because i don't know the width of the progress-bar beforehand.

Is this a bad approach? I've not found anybody else handling multiple DOMs in one directive.

For testing, I tried to make the container red, when clicked:

app.directive('progressBar', function($timeout) {    
    var linkFn = function(scope, element, attrs) {
        element.on("click", function () {
          element.childNodes[0].css("background-color", "red");
        });
    };

    return {
        restrict: 'EA',
        scope:{},
        templateUrl: 'templates/directives/progress-bar.html',
        link: linkFn
    };
});

But this doesn't work:

Uncaught TypeError: Cannot read property '0' of undefined

WalksAway · Accepted Answer · 2016-09-27 19:15:46Z

2

first of, don't edit the dom like that

element.childNodes[0].css("background-color", "red");

use ngStyle thats the angular way https://docs.angularjs.org/api/ng/directive/ngStyle

like so:

<div class="container" ng-style="myStyle" ng-click="clickHandler()">
   <div class="progress-line"></div>
</div>
<div class="current"> 11min </div>
<div class="max"> 24min </div>


app.directive('progressBar', function($timeout) {    
    var linkFn = function(scope, element, attrs) {
        scope.myStyle = {};
        scope.clickHandler = function() { scope.myStyle.background-color = 'red' }
    };

    return {
        restrict: 'EA',
        scope:{},
        templateUrl: 'templates/directives/progress-bar.html',
        link: linkFn
    };
});

answered Sep 27, 2016 at 19:15

WalksAway

2,8292 gold badges24 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jolle Over a year ago

Okay, but how will I then get the width of the container?

WalksAway Over a year ago

why do you need the width of the container? just place the progress bar inside the container and calculate the percent

WalksAway Over a year ago

btw, you might want to look at bootstrap-ui angular-ui.github.io/bootstrap it is a really useful angularjs bootstarp library, which has progress line directives... but if you are dead set on creating your own it is fairly easy

Pankaj Parkar · Accepted Answer · 2016-09-27 19:23:50Z

1

.css isn't a native method over DOM, you can use that just by passing DOM to angular.element(jQLite).

element.children().eq(0).css("background-color", "red");

Alternative method would be you could use ng-style/ng-class directive which can do the same thing.

edited Sep 27, 2016 at 19:23

answered Sep 27, 2016 at 19:12

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

1 Comment

Pankaj Parkar Over a year ago

@charlietfl thank you for heads up, corrected mine answer :)

Collectives™ on Stack Overflow

Controlling multiple DOMS with Angular Directive?

2 Answers 2

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Related