指令绑定中的值正确，但未返回true

Question

I'm getting some strange behavior from a custom directive. If I pass in a value directly it seems to work but if I pass in a binding to a value it does not work. Also, the value when I console.log seems to be correct but it doesn't 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}}">

Answer 1

Most possibly your issue could be with asynchronously assigned profile.name , by the time you run the directive the data might not have come back yet. So one technique you can apply is to wait till you get the data by registering a watch on the attribute ( attrs.$observe ) of on the scope property ( scope.$watch ), and cleanup the watch once you got the value.

Example:-

  link: function(scope, el, attrs) {
        el.css('background', '#5DC472');

       //attrs.$observe('color', function(v){
        var unWatch = scope.$watch('color', function(v){ //Set up a watch
          if(v){ //Check if you got the value yet if so
            unWatch(); //clear the watch
            init(); //initialize directive
          }
        });

        function init(){
           console.log(attrs);
           console.log(scope.color); //attrs.color
           console.log(scope.color === 'Andrey');
        }
      }

Plnkr

Answer 2

Did you try binding the scope differently, like this? (Though for me it worked both ways)

//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(scope.color); //should display 'Andrey'
      }
    };
  }]);

//html = {{profile.name}} does output 'Andrey'    
<section class="col user-tasks" user-color color="profile.name">