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

Question

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

Expression 'undefined' in attribute 'message' used with directive 'homeComp' is non-assignable!

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

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

这是因为您将消息定义为双向绑定，但是您的 html 没有提供任何绑定。

这一行：

<home-comp></home-comp>

应该是

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

并且您需要在范围内的某处声明 myMessageVariable。

Answer 2

如果引用的属性仅供组件本身使用，则没有必要在您的组件中使用 binding 选项。

通过将 binding 与 = 一起用于 message 属性，您明确告诉指令该参数是双向绑定，这意味着它将在 parent HTML 中设置，对 message 属性的更改应写回 HTML。因为 <home-comp> 标签没有 message 属性，所以 HTML 不可赋值（不能写回）。

修复此错误的方法有以下三种：

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

More info from the docs.

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

Angular 1.5 component Expression 'undefined' in attribute

angularjs

angularjs-components