AngularJS 1.5コンポーネントのDOM操作

Question

AngularJSコンポーネントのコンセプトを頭で包み込み、原理を理解し始めましたが、実際に試してみると、どのように実装するのか分かりませんコンポーネントと一緒に。

リニアプログレスバーを実装する必要があります。テンプレートがあるため、論理的にはディレクティブではなくコンポーネントにする必要がありますが、コンポーネントでDOM操作を行う方法が見つからず、内部にディレクティブそのような小さなコンポーネント。ここでディレクティブの基本的な実装です：

JS

angular.module('test', []) 

.controller('MainCtrl', function($q, $scope) { 

    $scope.curVal= 0; 

    $scope.maxVal = 100; 

}) 

.directive('progressBar', [function() { 

    return { 
     restrict: 'E', 
     scope: { 
     curVal: '@', 
     maxVal: '@' 
     }, 
     template: "<div class='progress-bar'>"+ 
        "<div class='progress-bar-bar'>testing</div>"+ 
       "</div>",  

     link: function ($scope, element, attrs) { 

     function updateProgress() { 
      var progress = 0; 

      if ($scope.maxVal) { 
      progress = Math.min($scope.curVal, $scope.maxVal)/$scope.maxVal * element.find('.progress-bar').width(); 
      } 

      element.find('.progress-bar-bar').css('width', progress);   
     } 

     $scope.$watch('curVal', updateProgress); 
     $scope.$watch('maxVal', updateProgress);   
     } 
    }; 
}]); 

HTML

<progress-bar cur-val='{{curVal}}' max-val='{{maxVal}}'> 

CSS

.progress-bar { 
    width: 120px; 
    height: 18px; 
    border-style: solid; 
    border-width: 1px; 
    background-color: rgba(100,50,100,.60); 
    border-color: #aaa; 
} 

.progress-bar-bar { 
    width: 0px; 
    background-color: rgb(100,50,100); 
    height: 100%; 
    color: #fff; 
    font-weight: normal 
} 

だから、コンポーネントの原則を間違って理解していたのかもしれませんが、私は本当に面白いと思っていました。

私の質問は次のとおりです。何らかの方法でコンポーネントのDOMを操作できますか？答えがいいえの場合、コンポーネントでこのディレクティブを実装する方法は何ですか（そして、それはまったく適切ですか）。 CSSを変更するためにコンポーネントに指示を追加するのが適切な選択だとは思わないので、私は固執しています。

Answer 1

を見ますアプリケーションをどのように設計するかという問題があります。

MVC（MVVM、MVW、MV *）アーキテクチャを採用したい場合は、コンポーネントを持つことはほとんど意味がありません。ビューを作成するだけで、いくつかのDOM要素を変更または制御するコントローラとディレクティブによって制御されます。MV *アプリで

あなたが本当には、ページの残りの部分からブロックを分離しても、それを再利用可能にしたい場合があります。それでもコンポーネントを作ることはできますが、そのアーキテクチャーではディレクティブに固執する方が意味があります。

1.5以降では、ディレクティブはどのコンポーネントに非常に接近しています。あなたはスコープを取り除くことができ、コントローラを作成することができます...など、ちょうどもう少しの定型コードを書くことができます。

コンポーネントアーキテクチャ（反応する、Webコンポーネント、angular2 ...など）に従うようにするには、アプリケーション内のすべてがコンポーネントである必要があります。 （ログイン、ナビゲーション、フッターなど）、コンポーネントのコンポーネントを小さくすることができます。 （ファイルアップロードコンポーネントにプログレスバーコンポーネントが含まれる可能性があります）

さらにDOM要素の制御が必要な場合は、ディレクティブを使用します。 あなたのために既存の角度指令（ngStyle、ngClass、ngShow ...など）が動作しない場合は、あなたが作成します。

var progressBar = { 
    bindings: { 
    width: '<' 
    }, 
    template: `<div class="meter"> 
       <span ng-style="{ 'width' : $ctrl.width }"></span> 
      </div>` 
} 

https://plnkr.co/edit/rz8AVALGVl5EiZR1OUdK?p=preview

PS：

プログレスバーの事を答えるために（あなたはディレクティブを作成することができ、入力が自動的に焦点を当てる取得したいが）、これは私がそのコンポーネントを記述する方法を次のとおりです。 CSSスタイルはcss-tricksからコピーされて時間を節約しました。

Answer 2

Angularのドキュメンテーションによると、DOM操作は指令を使って行われるべきです（SHOULD）。現在は大きな作業になるかもしれませんが、プロジェクト内でいつでもディレクティブを再利用できます。

"ディレクティブは、AngularJSのHTMLコンパイラ（$ compile）に指定された動作をそのDOM要素に付けるように指示する、DOM要素のマーカー（属性、要素名、コメントまたはCSSクラスなど）です例えばイベントリスナーを介して）、DOM要素とその子要素を変換することさえできます。

https://docs.angularjs.org/guide/directive

ここだあなたはディレクティブ

app.directive('changeStyle', function() { 
return { 
    restrict: 'AC', 
    link: function (scope, element, attrs) {   
     scope.$watch(attrs.myAttr, function (value) {  
     element.css('background-color', (value ? 'transparent' : attrs.myBgcolor));    
     });      
    } 
} 

を使用してCSSを変更する方法である

}）;

Answer 3

たとえば、同様のコンポーネントを作成しました。スタイルの置き換えの定義を見てください：

テンプレート（myDiv.html）：

<div class="bgDiv" style="color: {{ $ctrl.color }}"> 
    myDiv 
</div> 

を宣言しています。

component('myDiv', { 
    templateUrl: 'myDiv.html', 
    bindings: { 
     color: '=' 
    } 
}) 

使用するには、ディレクティブ対コンポーネントについてのあなたの混乱に対処するためにplunker