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复制的,以节省时间.