feners feners - 1 month ago 9
CSS Question

Getting change color with mouse hover to work using Angular

http://codepen.io/Feners4/pen/KggAwg

I want to get the cubes to change color with mouse hover using Angular. Ive managed to get it to work on one side of a cube, but I want the effect to change the whole cube color.

This is my 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>


My 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');
});
}
};
}])


How can I get the cubes to Change color on Mouse hover to work and when Mouse leaves it changes back?

Answer

One of the main problems here is how you defined ng-app, as I've stated in my comment this defines the root of the application to be used by Angular. Placing it in such a specific location would mean none of the other elements are connected to Angular. The first thing that needs to be done is your HTML should be cleaned up, there are duplicate closing header tags with no openings and there is not a closing body. Since you never defined a controller and it's not being used I removed it (otherwise it will throw an error) After that you can just define your ng-app on the body and that will allow to use your directive on any element:

<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>