用Angular Directive控制多個DOMS？

我是相當新的角度，我想創建一個指令看起來像這樣在AngularJS：用Angular Directive控制多個DOMS？

我的做法是做一個模板的東西，如：

進度條。 HTML

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

然後用CSS來製作圖形和鏈接一些JavaScript /編譯指令的功能，移動標記（「11分鐘」和「24分鐘」），以合適的崗位上，BEC因爲我不知道進度條的寬度。

這是一個壞的方法？我還沒有發現任何人在一個指令中處理多個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

來源

2016-09-27 Jolle

首先，不要編輯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 
    }; 
});

來源

2016-09-27 19:15:46 WalksAway

好吧，但我將如何得到容器的寬度？ – Jolle

爲什麼你需要容器的寬度？只需將進度條放入容器中，然後計算出百分比 – WalksAway

btw，你可能想看看'bootstrap-ui' https://angular-ui.github.io/bootstrap/它是一個非常有用的angularjs bootstarp庫，它有進展線指令......但如果你已經設定了自己創造的條件，這相當容易 – WalksAway

.css尚未結束DOM，你是土生土長的方法可以通過將DOM傳遞給angular.element（jQLite）來使用它。

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

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

來源

2016-09-27 19:12:08

@charlietfl感謝你的頭糾正我的答案:) –

用Angular Directive控制多個DOMS？

回答

相關問題