Question

我正在尝试使用AngularJs 1.5组件，但每次我声明bindings时我都会收到此错误：

与'homeComp'指令一起使用的属性'message'中的表达式'undefined'是不可赋值的！

我正在尝试一个简单的组件，只是为了学习它，这就是代码：

var component = {
  bindings: {
      message: '='
  },
  controllerAs: 'vm',
  controller: function MainController() {
    this.message = 'Welcome to my component';

    function debug() {
      this.message = 'This message changed';
    }
    this.debug = debug;
  },
  template: [
    'Message: {{ vm.message }}<br />',
    '<button ng-click="vm.debug()">Change message</button>'
  ].join(``)
};

您可以在此处看到错误：http://plnkr.co/edit/uutk5kxOVpa5eLfjoa8U?p=preview

代码有什么问题？或者是什么导致了这个错误？如果我删除了绑定，则不会出现错误，我可以更改消息。

Answer 1

如果引用的属性仅由组件本身使用，则不必在组件中使用binding选项。

通过binding使用=作为message属性，您具体告诉指令该参数是双向绑定，这意味着它将在< strong> parent HTML，并且应该将对message属性的更改写回HTML。由于<home-comp>标记没有message属性，因此HTML无法分配（无法写回）。

有三种方法可以解决此错误：

强制执行<home-comp message="default message">要求，并始终在HTML中提供该属性。
使用binding将message: '=?'定义为可选。 plunkr
如果不打算从HTML设置，则完全从message删除binding属性。

More info from the docs.

Answer 2

这是因为您已将消息定义为双向绑定，但您的html未提供任何要绑定的内容。

这一行：

<home-comp></home-comp>

应该是

<home-comp message='myMessageVariable'></home-comp>

你需要在范围内的某个地方声明myMessageVariable。

Angular 1.5组件属性中的表达式'undefined'

2 个答案: