Question

我有以下情况：

在我的控制器中，我运行$interval，从我的服务器获取一些数据。基于返回的值，我想应用一个css类并做一些其他逻辑，所以我已经创建了一个指令来处理它。问题是指令不会在每个区间内重新评估，因此无论是否满足其他条件，在开始时应用的css类都会在每个$interval中保持应用。我在这里创建了一个简单的问题再现：http://jsfiddle.net/Jw54n/

以下是我的应用的代码：

var app = angular.module("app", []);

app.controller("home", function ($interval) {
    var vm = this;

    vm.data = 10;

    $interval(function () {
        vm.data = Math.floor((Math.random() * 10) + 1);
    }, 1000);
});

app.directive("valueAlerter", function () {
    return {
        restrict: "E",
        replace: true,
        template: "<div>{{model}}</div>",
        require: "^ngModel",
        scope: {
            model: "=ngModel"
        },
        link: function ($scope, elem, attrs) {

            var value = $scope.model;
            var amberValue = 5;
            var redValue = 9;

            elem.addClass("success");

            if (value >= redValue) {
                elem.addClass("danger");
                elem.removeClass("success");
            } else if (value >= amberValue) {
                elem.addClass("warning");
                elem.removeClass("success");
            }
        }
    };
});

Answer 1

您需要观看模型更改，然后应用css：

$scope.$watch(function(){
    return $scope.model;
},function(value){
    //your conditions related to css
});

Angular：指令不在$ interval内重新编译

1 个答案: