指令内的 AngularJS 模板。改变风格？答案

【问题标题】：AngularJS template inside directive. Change the Style?指令内的 AngularJS 模板。改变风格？
【发布时间】：2015-09-23 10:53:00
【问题描述】：

指令中的 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";
                }
            });
        }

    }
});

颜色总是消退到最后一个值。其余时间它工作正常。请帮忙。

【问题讨论】：

有一个小技巧可能会奏效。在您的 html 中，添加一个隐藏的 div 并在其中输入一个新日期（通过 new Date()）。这将确保 Angular 不使用预编译指令。

标签： javascript css angularjs angularjs-directive

【解决方案1】：

不要将颜色放在 .amount 类上，而是将其放在具有 .amount 类的元素的样式中：

html+= '</b> <span class="amount" ng-style="{height:(value/maxValue)*100 + '%', background: color}"></span> ...

【讨论】：

其实你可以看到我用的是.amount { background:{{color}}，所以问题是颜色值没有变化。
不完全是，你在样式标签中使用它，它可能不会被角度跟踪，所以颜色可能会改变，但改变不会级联到视图，将它与 ng-style 一起使用确保它由角度管理

【解决方案2】：

将模板放在外部文件中会更容易，例如 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文件：

...

【讨论】：

【解决方案3】：

通过将变量放在<style> 规则中，每次将指令放置在页面上时，您都在重新定义 css 类——因此，如果指令的第一个实例设置了

.donation-meter .amount { background:red}

但下一个设置为

.donation-meter .amount { background:green}

那么最后一个 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>

【讨论】：