使用Angular Directive控制多个DOMS？

Question

我对angular很新，我想在AngularJS中创建一个如下所示的指令：

我的方法是制作一个类似的模板：

progress-bar.html

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

然后使用css在指令的link / compile函数中制作图形和一些javascript，将标记（＆＃34; 11min＆＃34;和＃34; 24min＆＃34;）移动到正确的位置，因为我事先并不知道进度条的宽度。

这是一种不好的方法吗？我没有找到任何其他人在一个指令中处理多个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("background-color", "red");

使用ngStyle angular way 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
    };
});

Answer 2

.css不是DOM上的本机方法，您可以通过将DOM传递给angular.element（jQLite）来使用它。

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

替代方法是你可以使用ng-style / ng-class指令来做同样的事情。