属性中的 Angular 1.5 组件表达式“未定义”

Posted 2023-02-23

【中文标题】属性中的 Angular 1.5 组件表达式“未定义”

【英文标题】：Angular 1.5 component Expression 'undefined' in attribute

【发布时间】：2016-09-10 18:25:51

【问题描述】：

我正在尝试使用 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

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

【参考方案1】：

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

这一行：

<home-comp></home-comp>

应该是

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

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

【讨论】：

但是当我声明this.message = '...'时不一样？你能提供一个可行的例子吗？

【参考方案2】：

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

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

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

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

More info from the docs.

【讨论】：

我正在使用绑定，因为我可能有单向数据绑定数据以及双向数据，具体取决于用例。因为我开始使用组件，所以我都尝试了，但是在使用上面的例子时出现了这个错误。那么如果我有一个单向数据绑定，我应该怎么做呢？

您是否特别尝试将 message 定义为可选，正如我在 plunkr 中为第二行项目工作所展示的那样？

是的，它适用于 2 路数据绑定，但如果我更改为 <，它就不再适用了。

好吧，这似乎是一个不同的问题，因为您甚至没有提到在您的问题正文中使用 < 并且没有在您发布的示例中使用它。不过我会尝试一下，看看会发生什么。

只是弄乱了 plunker，< 抛出错误，因为没有匹配的 HTML 可供读取，但 <? 似乎工作正常。