Why my directive doesn't show a String I'm passing to it

Question

I'm trying to build my second directive in Angular. I'm facing a problem that is driving me crazy. I'm new to angular, trying to studying it, following this very useful explanation and also this great tutorial, but I don't understand why, I can't pass a simple string to the directive.

This is my super simple directive's code:

uxctModule.directive('postIt', function() {
  return {
      restrict: 'AE',
      replace: 'true',
      scope:{
         message: "@"
      },

      template:"<div>Received: {{message}}</div>"
  };
});

I'm trying to pass a very simple string to it.

This is my markup:

 <div post-it message='{{postItContent}}'></div>

where postItComment is scope variable coming from its controller:

 $scope.postItContent = "THIS IS A STRING DECLARED IN MY CONTROLLER";

What's happening? Could someone please give me an explanation?

Answer 1

See this JS Fiddle, your solution works fine: http://jsfiddle.net/ahchurch/S6dBE/1/

Not for nothing but in your question (not sure if it's a typo or you just haven't noticed) - $scope.postItContent is not what you're binding your message to. Your binding is {{postItComment}}.

var myApp = angular.module('myApp',[]);

myApp.directive('postIt', function() {
  return {
      restrict: 'AE',
      replace: 'true',
      scope:{
         message: "@"
      },

      template:"<div>Received: {{message}}</div>"
  };
});
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.message = 'Superhero';
}