javascript - 使用 Angular Directive 控制多个 DOMS？

Question

我对 Angular 相当陌生，我想在 AngularJS 中创建一个如下所示的指令:

我的方法是制作一个类似以下内容的模板:

进度条.html

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

然后使用 css 制作图形，并在指令的链接/编译功能中使用一些 javascript 将标记(“11min”和“24min”)移动到正确的位置，因为我不知道标记的宽度预先进度条。

这是一个不好的方法吗？我还没有发现其他人在一个指令中处理多个 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

首先，不要这样编辑 dom

element.childNodes[0].css("背景颜色", "红色");

使用ngStyle，这就是 Angular 方式 https://docs.angularjs.org/api/ng/directive/ngStyle

像这样:

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