feners feners - 3 months ago 11
AngularJS Question

Error when changing the color of a div with on hover and Angular


I've been trying to get this cube I created and make it change color on mouse hover with Angular. For testing purposes, I started with changing the color of just on side of the cube. However, I keep getting this error on the console:

Error: $injector:modulerr Module Error

My Html is:



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

My JS is:

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

How can I fix this error in my code? Does it have to do with the placement of the ng-app in my html?



angular.module('App', ['appf'])


angular.module('App', [])

seemed to work. 'appf' appears to be a dependency that the module cannot find.