Steuerung mehrerer DOMS mit Winkeldirektive?

Question

Ich bin ziemlich neu in Winkel- und ich möchte wie diese, eine Richtlinie schaffen, in AngularJS suchen:

Mein Ansatz ist es, eine Vorlage mit so etwas wie zu machen:

Fortschrittsbalken. html

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

Dann CSS verwenden, um die Grafiken und einige Javascript in dem Link/kompilieren Funktion der Richtlinie zu machen, die Marker („11min“ und „24min“) an die richtigen Positionen zu bewegen, bec sonst kenne ich die Breite der Fortschrittsanzeige nicht vorher.

Ist das ein schlechter Ansatz? Ich habe niemanden gefunden, der mehrere DOMs in einer Direktive behandelt.

Für den Test habe ich versucht, den Container rot zu machen, wenn sie angeklickt:

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 
    }; 
}); 

Aber das funktioniert nicht:

Uncaught TypeError: Cannot read property '0' of undefined 

Answer 1

zunächst, nicht bearbeiten die dom wie die

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

Verwendung ngStyle das ist die angular way https://docs.angularjs.org/api/ng/directive/ngStyle

wie 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 
    }; 
}); 

Answer 2

.css über DOM keine native Methode ist, Sie kann das nur verwenden, indem Sie DOM an angular.element (JQLite) übergeben.

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

Alternative Methode wäre, Sie ng-style/ng-class Direktive verwenden könnte, die das gleiche tun können.