将数据传递给Angular中的指令时出错

Question

我有这个简单的指令：

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 = [       {         发送：真的，         消息：“aasdasd dsfsdfd”       }，... ]

我可能错过了一些愚蠢的事情:(

Answer 1

问题在于您正在执行vm.message = $attrs.message;，并且您从字面上理解字符串，这意味着：{{msg.message}}，因为这是“{1}}的文字。用该属性写的：

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"
      }, ...
]

编辑：另一件事是，既然你已经从指令绑定了，你需要绑定到变量本身，而不是绑定到它的字符串文字，意味着删除{{ 1}}来自指令HTML：

{{}}

Fiddle

Answer 2

这对我有用：

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