Положение в AngularJs

Question

Положение в AngularJs

0

Я использую eyeTracker и хочу изменить пользовательский интерфейс, в зависимости от Eyetrackerpositon.

Я хочу определить области на моем сайте. И если eyeTrackerPosition является (стоит) в области, то я хочу изменить, например, цвет области.

В этом случае эти области являются директивами.

Но как это работает с позициями? Потому что мне нужны координаты экрана.

Вы знаете, как это возможно?

Как я могу выполнить запрос, если позиция содержит эту область? С массивом?

trap 05 окт. 2015, в 13:54

Источник

Теги:

javascript

angularjs

2 ответа

Ещё вопросы

LoremIpsum · Answer 1 · 2015-10-05T12-00-00.000Z

Хорошей отправной точкой для определения позиции/размера элемента HTML является использование getBoundingClientRect. Он возвращает объект, содержащий слева, верх, ширину и высоту для любого элемента DOM. Подробнее об этом здесь: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

trap · Answer 2 · 2015-10-06T05-57-00.000Z

Привет, я использовал метод, который вы предложили.

myApp.directive('hasFocus', function ($interval) {
return {
    restrict: 'A',
    scope: {
    },
    templateUrl: '123/Scripts/directives/route.html',
    link: function (scope, element, attrs) {
        $interval(function () {
            var rect = element[0].getBoundingClientRect();

            x = rect.left;
            y = rect.top;
            w = rect.right - rect.left;
            h = rect.bottom - rect.top;

           // element.text(x + ", " + y + ", " + w + ", " + h);

        }, 3000);
     }
   };
});

И он работает.

Но теперь я позиции моей панели в ссылке. панель i, определенная в route.html.

route.html:

<div class="panel panel-primary">

<div class="panel-heading">Panel heading</div>      <!-- i want this position-->
<div class="panel-body">
    <!--table-->
    <table class="table table-condensed">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
        </tbody>
    </table>
</div>