The behavior of a custom directive is puzzling me. When I directly pass in a value, it works fine. However, if I bind the value to a variable, it doesn't work as expected. Interestingly, when I use console.log to show the value, it appears to be correct but does not return true.
//directive
angular.module('tallllyApp')
.directive('userColor', ['simpleLogin', '$timeout', function (simpleLogin, $timeout) {
'use strict';
return {
restrict: 'AE',
scope: {
color: '@'
},
link: function(scope, el, attrs) {
el.css('background', '#5DC472');
console.log(attrs); //attrs.color shows 'Andrey'
console.log(attrs.color); //displays nothing
console.log(attrs.color === 'Andrey'); //false
}
};
}]);
//html = {{profile.name}} does output 'Andrey'
<section class="col user-tasks" user-color color="{{profile.name}}">