Javascript 在将数据传递到指令时出错

我有一个简单的指示：

angular.module('app')
  .directive('ppBubble', function () {

    function PpBubble($scope, $element, $attrs) {
      var vm = this;
      vm.message = $attrs.message;
      vm.isSent = $attrs.sent;
    }

    return {
      templateUrl: '../views/directives/ppBubble.html',
      restrict: 'E',
      controller: PpBubble,
      controllerAs: 'vm',
      bindToController: true
    };
  });

下面是我如何使用它：

<pp-bubble ng-repeat="msg in vm.messages" sent="{{msg.sent}}" message="{{msg.message}}"></pp-bubble>

问题是我看到的是“msg.message”而不是此对象属性所包含的字符串：

以下是消息数组：

vm.messages = [
      {
        sent: true,
        message: "aasdasd dsfsdfd"
      }, ...
]

vm.messages=[ { 是的， 消息：“aasdasd dsfsdfd” }, ... ]

---

我可能遗漏了一些愚蠢的东西：（

问题是您正在执行

vm.message=$attrs.message；

并且您正在按字面理解字符串，这意味着：

{{msg.message}}

，因为这是在该属性中写入的文本：

message=“{{msg.message}}”

您需要使用作用域使Angular发挥其绑定魔力，并从中获取数据：

 function PpBubble($scope, $element, $attrs) {
    var vm = this;
    vm.message = $scope.message;
    vm.isSent = $scope.sent;
  }

  return {
    templateUrl: '../views/directives/ppBubble.html',
    restrict: 'E',
    scope: { message: "=", sent: "=" },
    controller: PpBubble,
    controllerAs: 'vm',
    bindToController: true
  };

以下是消息数组：

vm.messages = [
      {
        sent: true,
        message: "aasdasd dsfsdfd"
      }, ...
]

EDIT：另一件事是，既然您是从指令绑定的，那么您需要绑定到变量本身，而不是它的字符串文本，这意味着要从指令HTML中删除

{}

：

<pp-bubble ng-repeat="msg in messages" sent="msg.sent" message="msg.message"></pp-bubble>

---

以下是对我有效的方法：

function PpBubble($scope, $element, $attrs) {
    var vm = this;
  }

  return {
    templateUrl: '../views/directives/ppBubble.html',
    restrict: 'E',
    controller: PpBubble,
    controllerAs: 'vm',
    bindToController: true
  };
});

我还从html中删除了{{}}：

---

感谢@Omri Aharon

您的控制台错误是什么？控制台中没有发现错误。这很好，我事先就解决了，请参阅答案。现在，我得到了这个错误：

error:[$parse:syntax]语法错误：从[{msg.message}]开始的表达式[{{{msg.message}]第2列的标记{无效键].

@vlio20错过了作用域声明末尾的昏迷，可能就是这样。不，我已经添加了：（@vlio20那么它缺少了一些愚蠢的括号..从这里很难分辨。你能点击错误吗？它会指向错误行。看起来你有

{msg.message}

而不是

{msg.message}

。可能是吗？很高兴你找到了答案：）