javascript - 为什么我的指令不显示我传递给它的字符串

Question

我正在尝试在 Angular 中构建我的第二个指令。我面临着一个让我发疯的问题。我是 Angular 新手，试图研究它，关注 this very useful explanation还有this great tutorial ，但我不明白为什么，我无法将简单的字符串传递给指令。

这是我的 super 简单指令的代码:

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

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

我正在尝试向它传递一个非常简单的字符串。

这是我的标记:

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

其中 postItComment 是来自其 Controller 的范围变量:

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

发生什么事了？有人可以给我解释一下吗？

Answer 1

看到这个JS Fiddle，你的解决方案工作正常:http://jsfiddle.net/ahchurch/S6dBE/1/

不是没有原因，而是在你的问题中(不确定这是一个拼写错误还是你只是没有注意到) - $scope.postItContent 不是你将消息绑定(bind)到的内容。您的绑定(bind)是 {{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';
}