Angularjs Angular 1.5-显示货币颜色的自定义指令

我在Angular 1.5.x中创建了一个指令，将美元金额写成红色或绿色，这取决于它是亏损还是盈利

<div  financial-Color amount="model.Money"></div>

到目前为止，我的自定义指令是这样的，如何用颜色写出货币中的$Money金额

app.directive('financialColor', function () {
    return {
        restrict: 'EA',
        scope: {
            'amount': '='
        },

        link: function (scope, element, attrs) {
            scope.$watch('amount', function (condition) {
                if (attrs.amount<0) {
                    element.css('color', 'red');
                }
                if (attrs.amount > 0) {
                    element.css('color', 'green');
                };
            });
        }
    }

应用程序指令（'financialColor'，函数（）{ 返回{ 限制：“EA”， 范围：{ “金额”：“=” }, 链接：函数（范围、元素、属性）{ 范围：$watch（'金额'），功能（条件）{ 如果（属性金额0）{ css（'color'，'green'）； }; }); } } 使用可以检查回调函数中的

newValue

参数

要获得所需的值，请使用过滤器将金额转换为所需的格式

要设置值，可以在

元素上使用AngularJS的html方法来设置值

以下是一个工作示例（量值在5秒后发生变化，以显示负量）：


//app.js
（功能（）{
"严格使用",；
角度模块（'app'，[]）；
})();
//main.controller.js
（功能（）{
"严格使用",；
角度。模块（'app'）。控制器（'MainController'，MainController）；
主控制器。$inject=['$timeout']；
函数主控制器（$timeout）{
var vm=这个；
vm.amount=100.05；
$timeout（函数（）{
vm.amount=-55.10；
}, 5000);
}
})();
//financial-color.filter.js
（功能（）{
"严格使用",；
角度。模块（'app'）。指令（'financialColor'，financialColor'）；
financialColor.$inject=['$filter']；
函数financialColor（$filter）{
返回{
限制：“EA”，
范围：{
“金额”：“=”
},
链接：函数（范围、元素、属性）{
范围.$watch（'amount'，函数（newValue，oldValue）{
//使用货币过滤器设置值
html（$filter（'currency'）（newValue，'$'，2））；
如果（新值<0）{
css（'color'，'red'）；
}else if（newValue>0）{
css（'color'，'green'）；
}
});
}
}
}
})（）；

使用可以检查回调函数中的
newValue
参数

要获得所需的值，请使用过滤器将金额转换为所需的格式

要设置值，可以在
元素上使用AngularJS的html方法来设置值

以下是一个工作示例（量值在5秒后发生变化，以显示负量）：


//app.js
（功能（）{
"严格使用",；
角度模块（'app'，[]）；
})();
//main.controller.js
（功能（）{
"严格使用",；
角度。模块（'app'）。控制器（'MainController'，MainController）；
主控制器。$inject=['$timeout']；
函数主控制器（$timeout）{
var vm=这个；
vm.amount=100.05；
$timeout（函数（）{
vm.amount=-55.10；
}, 5000);
}
})();
//financial-color.filter.js
（功能（）{
"严格使用",；
角度。模块（'app'）。指令（'financialColor'，financialColor'）；
financialColor.$inject=['$filter']；
函数financialColor（$filter）{
返回{
限制：“EA”，
范围：{
“金额”：“=”
},
链接：函数（范围、元素、属性）{
范围.$watch（'amount'，函数（newValue，oldValue）{
//使用货币过滤器设置值
html（$filter（'currency'）（newValue，'$'，2））；
如果（新值<0）{
css（'color'，'red'）；
}else if（newValue>0）{
css（'color'，'green'）；
}
});
}
}
}
})（）；
使用ng类实现

指令：

app.directive('financialColor', function () {
    return {
        restrict: 'EA',
        scope: {
            'amount': '='
        },
        template: "<span ng-class=\"{'red':amount<0, 'green': amount>0}\">${{amount}}</span>"
    }
});

使用ng类实现

指令：

app.directive('financialColor', function () {
    return {
        restrict: 'EA',
        scope: {
            'amount': '='
        },
        template: "<span ng-class=\"{'red':amount<0, 'green': amount>0}\">${{amount}}</span>"
    }
});

你想要什么？模型。货币格式？是的，期末结果基本上应该是55美元。你想要什么？模型。货币格式？是的，期末结果基本上应该是55美元