Question

如何更改指令中的某些内容（例如颜色）？

我有一个控制器，每3秒后获取一次新数据（眼睛位置）

   myApp.controller('MainController', function ($scope, $interval, externalService, eyeTrackerService) {
    $rootScope.gazePoints = [];
    var size = 4;
    var analyze = function () {
        if ($rootScope.gazePoints.length > size) {

            $scope.gazeArea = eyeTrackerService.getGazePoints($scope.gazePoints);
            //reduce data in array
            $scope.gazePoints.splice(0, 3);
        }
    };

    var eyeTrackerData = function () {
        externalService.getData().then(function (eyeTrackerData) {

            var eyetracker = eyeTrackerData.data.EyeTracker;
            var gaze_X = (eyetracker.X_left + eyetracker.X_right) * 0.5 * screen.availWidth;
            var gaze_Y = (eyetracker.Y_left + eyetracker.Y_right) * 0.5 * screen.availHeight;

            $scope.gazePoints.push({ x: gaze_X, y: gaze_Y });
            analyze();
        });
    };

      $interval(eyeTrackerData, 3000)
    });

该服务获取一系列gazePoints，并且必须分析用户是否正在查看该面板：

    myApp.service('eyeTrackerService', function ($rootScope) {
    this.getGazePoints = function (gazePoints) {
        var counter = 0;

        var date = $rootScope.rect;
        for (var i = 0; i < gazePoints.length; i++) {
            var x = gazePoints[i].x;
            var y = gazePoints[i].y;

            if (x >= date.left && x <= date.right && y >= date.top && y < date.bottom) {
                counter =+ 1;
                console.log("is watching");
                if(counter  == 5){
                     ///Here it should call the directive and change the color
                } 

            }

            else {
                console.log("is not watching")
            }
        }
    }
});

我的指示：

myApp.directive('dateInfo', function ($rootScope, $interval) {
    return {
        restrict: 'A',
        scope: {
        },

        templateUrl: '123/Scripts/directives/html/dateInfo.html',
        link: function (scope, element, attrs) {
            $interval(function () {
                $rootScope.rect = element[0].getBoundingClientRect();
                //Here i want to change the color 
                //for example a scope.changetext(); but how??

            }, 3000);
        }
      };
    });

我的html文件：

<div class="panel panel-primary">

  <div class="panel-heading">MyPanel</div>      
  <div class="panel-body">
    <input id="test" name="test">
  </div>
</div>

我知道很多代码。但正如您所看到的，该指令也会在每秒后调用以获取面板的当前位置。

现在我想在计数器== 5

之后更改面板中的颜色

在这种情况下，最佳解决方案是什么？我听说改变控制器中的文字并不好。

Answer 1

在间隔内，使用

$interval(function () {
        $rootScope.rect = element[0].getBoundingClientRect();
        element.addClass('someClassThatSetsColor');
    }, 3000);

您可以根据您选择的参数设置课程，例如，如果您没有看到您，请设置一个将颜色更改为红色的课程，或者其他任何内容。

在指令中更改文本

1 个答案: