複数のDOMSを角度指令で制御しますか？

Question

私は角にかなり新しいだと私はAngularJSでこのように見えるディレクティブを作成したい：

プログレスバー：

私のアプローチのようなものでテンプレートを作ることです。 HTML

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

その後BEC、右の位置にマーカー（「11min」と「24min」）を移動するためのディレクティブの機能をコンパイル/リンクしてグラフィックスと、いくつかのjavascriptを作るためにCSSを使用私は事前にプログレスバーの幅を知りません。

これは悪いアプローチですか？ 1つの指令で複数のDOMを扱う人はいませんでした。テストのために

クリックしたときに、私は、コンテナは赤作ってみました：

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

しかし、これは動作しません：

Uncaught TypeError: Cannot read property '0' of undefined 

Answer 1

は、その

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

使用のようなDOMを編集しないngStyleそうのようなangular way https://docs.angularjs.org/api/ng/directive/ngStyle

のthats：

<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はDOM、あなたの上にネイティブメソッドではありませんDOMをangular.element（jQLite）に渡すだけでそれを使うことができます。

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

代替方法は、あなたが同じことを行うことができますng-style/ng-classディレクティブを使用することができますでしょう。最初の