feners feners - 1 month ago 5
AngularJS Question

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

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

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:

<header>
Angularity
</header>

<h1>hjskl</hi>

<body>
<div class="container" ng-controller="AppCtrl">
</div>
</header>
<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>
</div>
</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.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 fix this error in my code? Does it have to do with the placement of the ng-app in my html?

Answer

Changing

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

to

angular.module('App', [])

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

Comments