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

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产权,你特别告诉指令,该参数是一个双向绑定,这意味着它将在设置父 HTML,而这种变化message属性应该写回HTML.由于<home-comp>标记没有message属性,因此HTML不可分配(无法写回).

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

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

来自文档的更多信息.