I am new to AngularJS and i was trying out AngularJS Behaviors with custom element attributes. I have this weird situation when i changed the name of the attribute i created. My initial code was like this.
HTML
<div ng-app="myApp">
<div enter="panel" leave>Content</div>
</div>
JavaScript
app.directive('enter', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('mouseenter', function() {
element.addClass(attrs.enter); // <- I have put a breakpoint here for inspection
});
}
}
});
app.directive('leave', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('mouseleave', function() {
element.removeClass(attrs.enter);
});
}
}
});
As you can see the attribute name that triggers the behavior is enter and this works as expected by adding the class panel to the div. (The breakpoints is hit when debugging) But the problem occurs when i try to change the name of the attribute to a more meaningful one.
Now the modified code..
HTML
<div ng-app="myApp">
<div onEnterAddCss="panel" leave>Content</div>
</div>
JavaScript
app.directive('onEnterAddCss', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('mouseenter', function() {
element.addClass(attrs.onEnterAddCss); // <- Breakpont here is never hit.
});
}
}
});
app.directive('leave', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('mouseleave', function() {
element.removeClass(attrs.onEnterAddCss);
});
}
}
});
Now when i change the attribute name to onEnterAddCss this does not work. The breakpoint never get hit. I am confused. Is there a specific character length that an attribute can be? Please help.
