![](/img/trans.png)
[英]Angularjs ng-click inside directive. ControllerAs connecting issue
[英]AngularJS template inside directive. Change the Style?
偽指令內的css無法編譯,並且本身會導致單色綠色。 我想為值標識符的不同值使用不同的顏色,並且css顏色應相應更改,但是對於所有溫度計小部件,它總是會退到最后一種顏色。 請幫忙。
angular.module('directives').directive('thermometer', function(){
return {
restrict: 'AE'
, replace: true
, transclude:true
,scope : {
value : "=",
maxValue : "=" ,
text:"@",
percent:"="
}
,template: function(element, attrs) {
var html = '<div style="float:left;margin-left:40px"><style> .donation-meter {margin-right:auto;margin-left:auto; width: 80px; } .donation-meter .glass { background: #e5e5e5; border-radius: 100px 100px 0 0; display: block; height: 100px; margin: 0 35px 10px; padding: 5px; position: relative; width: 20px; } .donation-meter .amount { background:{{color}}; border-radius: 100px; display: block; width: 20px; position: absolute; bottom: 5px; } .donation-meter strong { display: block; text-align: center; } .donation-meter .goal { font-size: 20px; } .donation-meter .total { font-size: 16px; position: absolute; right: 35px; } .bulb { background: #e5e5e5; border-radius: 100px; display: block; height: 50px; margin: 0 35px 10px; padding: 5px; position: relative; top: -20px; right: 15px; width: 50px; } .bulb .red-circle { background: {{color}}; border-radius: 100px; display: block; height: 50px; width: 50px; } .bulb .filler { background: {{color}}; border-radius: 100px 100px 0 0; display: block; height: 30px; width: 20px; position: relative; top: -65px; right: -15px; z-index: 30; } </style>';
html += '<div class="donation-meter"> <b>{{text}}</b>';
html += '<b class="goal">{{maxValue }}</b> <span class="glass"> <b class="total" style="bottom:{{(value/maxValue)*100}}%">{{value}}';
html+= '</b> <span class="amount" style="height:{{(value/maxValue)*100}}%"></span> </span> <div class="bulb"> <span class="red-circle"></span> <span class="filler"> <span></span> </span> </div> </div></div>';
return html;
}
,link:function(scope){
scope.$watch('value',function(newValue){
console.log("--------------------------");
console.log();
if(newValue==75){
scope.color="blue";
}
if(newValue==76){
scope.color="green";
}
});
}
}
});
顏色總是消退到最后一個值。 其余時間工作正常。 請幫忙。
而不是把顏色的類的.amount
把它放在有類元素的樣式.amount
:
html+= '</b> <span class="amount" ng-style="{height:(value/maxValue)*100 + '%', background: color}"></span> ...
將模板放置在外部文件(如Thermometer.html)上會更容易,您只需指定以下位置即可:
angular.module('directives').directive('thermometer', function(){
return {
restrict: 'AE'
, replace: true
, transclude:true
,scope : {
value : "=",
maxValue : "=" ,
text:"@",
percent:"="
}
; templateUrl: 'thermometer.html'
,link:function(scope){
scope.$watch('value',function(newValue){
console.log("--------------------------");
console.log();
if(newValue==75){
scope.color="blue";
}
if(newValue==76){
scope.color="green";
}
});
}
}
});
然后創建html文件:<div style = ...> ... </ div>
通過將變量放在<style>
規則中,您每次將指令放在頁面上時都重新定義了css類-因此,如果指令的第一個實例設置了
.donation-meter .amount { background:red}
但是下一個將其設置為
.donation-meter .amount { background:green}
那么最后一個CSS規則將覆蓋先前的CSS規則,因此將應用於頁面上的所有.donation-meter .amount
元素。
您應該將大部分CSS提取到樣式表中,而不是針對指令的每個實例重新呈現它。 對於需要可變樣式規則的部分,請盡可能使用ng-class:
<div ng-class="{red: newValue < 75, green: newValue >74}">...</div>
或者直接在元素上而不是在類規則上設置變量樣式:
<div style="background-color: {{color}}">
代替
<style>.foo {background-color: {{color}}</style> <div class="foo"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.