1

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

与指令“homeComp”一起使用的属性“消息”中的表达式“未定义”是不可赋值的！

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

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

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

4

2 回答 2

5

binding如果所引用的属性仅由组件本身使用， 则无需在组件中使用该选项。

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

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

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

来自文档的更多信息。

于 2016-05-14T16:26:20.057 回答
2

这是因为您已将 message 定义为 2 路绑定，但您的 html 没有提供任何要绑定的内容。

这一行：

<home-comp></home-comp>

应该

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

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

于 2016-05-14T16:13:22.470 回答