javascript - 将 jquery 代码转换为 Angular 代码

Question

我正在使用 ionic Angular 构建一个天气应用程序，我的应用程序即将完成，但我想添加一些附加组件。我希望将这个 jQuery 代码转换为 Angular :

var tempCelsius = Math.round(data.current_observation.temp_c);
        if (tempCelsius < 15){
            $("#temp").css("color", "#00DFF9");
        } else if (tempCelsius < 20){
            $("#temp").css("color", "#21DBE1");
        } else if (tempCelsius < 25) {
            $("#temp").css("color", "#A0FF74");
        } else if (tempCelsius < 30) {
            $("#temp").css("color", "##FEB900");
        } else if (tempCelsius < 35) {
            $("#temp").css("color", "##FE7400");
        } else if (tempCelsius < 40) {
            $("#temp").css("color", "#FE5100");
        } else if (tempCelsius > 45) {
            $("#temp").css("color", "#FE0000");
        } else if (tempCelsius > 50) {
            $("#temp").css("color", "##FE0000");
        } else if (tempCelsius > 55) {
            $("#temp").css("color", "#E8250C");
        }


        $("#temp").html(Math.round(tempCelsius )+ "&#176;C");

我尝试使其像 Angular 一样，但它不起作用:

    $scope.tempco =function(tempco){    
    var tempCelsius = Math.round(weather.currently.temperature);
        if (tempCelsius < 15){
            $("#temp").css("color", "#00DFF9");
        } else if (tempCelsius < 20){
            $("#temp").css("color", "#21DBE1");
        } else if (tempCelsius < 25) {
            $("#temp").css("color", "#A0FF74");
        } else if (tempCelsius < 30) {
            $("#temp").css("color", "##FEB900");
        } else if (tempCelsius < 35) {
            $("#temp").css("color", "##FE7400");
        } else if (tempCelsius < 40) {
            $("#temp").css("color", "#FE5100");
        } else if (tempCelsius > 45) {
            $("#temp").css("color", "#FE0000");
        } else if (tempCelsius > 50) {
            $("#temp").css("color", "##FE0000");
        } else if (tempCelsius > 55) {
            $("#temp").css("color", "#E8250C");
        }       
    }

html:

{{tempco(weather.currently.temperature)| number:1}} °

Answer 1

你需要编写一个指令来处理dom操作

Angularjs

YourApp.directive('tempCelsius', function () {
    return {
        scope: {
            tempCelsius:'=', //or @
        }
        restrict: 'A',
        link: function (scope, element) {
            var $el = $(element); //need jquery js. (don't recommend use jquery & angularjs)
            var tempCelsius = scope.tempCelsius;
            if (tempCelsius < 15){
                $el.css("color", "#00DFF9");
            } else if (tempCelsius < 20){
                $el.css("color", "#21DBE1");
            } else if (tempCelsius < 25) {
                $el.css("color", "#A0FF74");
            } else if (tempCelsius < 30) {
                $el.css("color", "##FEB900");
            } else if (tempCelsius < 35) {
                $el.css("color", "##FE7400");
            } else if (tempCelsius < 40) {
                $el.css("color", "#FE5100");
            } else if (tempCelsius > 45) {
                $el.css("color", "#FE0000");
            } else if (tempCelsius > 50) {
                $el.css("color", "##FE0000");
            } else if (tempCelsius > 55) {
                $el.css("color", "#E8250C");
            }   
        }
    }
});

html

<span temp-celsius="12"> //use @
<span temp-celsius="info.tempCelsius"> //use =, value in scope