将数据传递给 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}}，因为这是在该属性中写入的文本：

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

编辑：另一件事是，既然你是从指令绑定的，你需要绑定到变量本身，而不是它的字符串文字，意思是删除来自指令 HTML:

的 {{}}

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

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

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

error while passing data to directive in Angular

javascript

angularjs

angularjs-directive