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操作都應該使用指令來完成。 它現在可能是一項重大工作，但您始終可以在項目中重用該指令。

“在高級別，指令是DOM元素上的標記（例如屬性，元素名稱，注釋或CSS類），它告訴AngularJS的HTML編譯器（$ compile）將指定的行為附加到該DOM元素（例如，通過事件偵聽器） ），甚至改造DOM元素及其子元素。“

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

這是你將如何使用指令更改css

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

}）;

Answer 3

我舉了類似的組件。 看看樣式替換定義：

模板（myDiv.html）：

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

聲明：

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

看看plunker