Изменение цвета при наведении курсора мыши для работы с использованием Angular

#javascript #html #css #angularjs

#javascript #HTML #css #angularjs

Вопрос:

Я хочу, чтобы кубы меняли цвет при наведении курсора мыши с помощью Angular. Мне удалось заставить его работать на одной стороне куба, но я хочу, чтобы эффект изменил цвет всего куба.

Это мой HTML:

 <header>
  Angularity
</header>

<h1>hjskl</hi>

<body>
  <div class="container" ng-controller="AppCtrl">
            </div>
  </header>
<div class="wrap">
    <div ng-app="App" class="cube"change-background colorcode=¨#FE0883¨>
        <div class="front">AAA</div>
        <div class="back"></div>
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</div>

</header>
<div class="wrap2">
    <div class="cube2">
        <div ng-app="App" class="front2" change-background colorcode=¨#FE0883¨>AAA</div>
        <div class="back2"></div>
        <div class="top2"></div>
        <div class="bottom2"></div>
        <div class="left2"></div>
        <div class="right2"></div>
    </div>
</div>

Мой JS:

 angular.module('App', [])
  .directive('changeBackground', ['$animate', function($animate) {
    return {
      restrict: 'EA',
      scope: {
        colorcode: '@?'
      },
      link: function($scope, element, attr) {
        element.on('mouseenter', function() {
          element.addClass('change-color');
          element.css('background-color', $scope.colorcode);
        });
        element.on('mouseleave', function() {
          element.removeClass('change-color');
          element.css('background-color', '#fff');
        });
      }
    };
  }])

Как я могу заставить кубы менять цвет при наведении курсора мыши, чтобы работать, а когда мышь уходит, она меняется обратно?

1. Почему бы не использовать CSS для: обработки наведения?

2. Я строго хочу использовать Angular для учебных целей.. @campino2k

3. Примечание: я думаю, вы в замешательстве ng-app . Это то, что определяет корневой элемент вашего приложения angular, и у вас должен быть только один, будет работать только первый. Обычно он помещается в body html тег or .

4. Я поместил его в свой body тег, но теперь при наведении курсора мыши изменение цвета не происходит.. @SpencerWieczorek

5. @feners Это связано с недопустимым HTML, который необходимо исправить. Наряду с этим контроллер выдаст ошибку, если она не была определена. Смотрите Мой ответ ниже для получения более подробной информации.

Ответ №1:

Одна из основных проблем здесь заключается в том, как вы определили ng-app , как я уже указывал в своем комментарии, это определяет корень приложения, которое будет использоваться Angular. Размещение его в таком определенном месте будет означать, что ни один из других элементов не подключен к Angular. Первое, что нужно сделать, это очистить ваш HTML-код, есть повторяющиеся закрывающие header теги без отверстий, и нет закрытия body . Поскольку вы никогда не определяли контроллер и он не используется, я удалил его (в противном случае он выдаст ошибку) После этого вы можете просто определить свой ng-app на body и это позволит использовать вашу директиву для любого элемента:

 <html>
<header>
  Angularity
</header>

<h1>hjskl</hi>

<body ng-app="App">
<div class="wrap">
    <div class="cube"change-background colorcode=¨#FE0883¨>
        <div class="front">AAA</div>
        <div class="back"></div>
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</div>

<div class="wrap2">
    <div class="cube2">
        <div class="front2" change-background colorcode=¨#FE0883¨>AAA</div>
        <div class="back2" change-background ></div>
        <div class="top2" change-background></div>
        <div class="bottom2" change-background></div>
        <div class="left2" change-background></div>
        <div class="right2" change-background></div>
    </div>
</div>

</body>
</html>