如何使用Angular 1.5 component（）方法将范围设置为false

Question

我想使用angular 1.5的component（）方法。 但是，在同一DOM元素上应用不同的组件似乎是不可能的。 这是因为无论我如何在component（）调用中设置isolate属性，都会创建一个新的作用域，从而导致出现错误消息：

[$ compile：multidir]多个指令[...]要求新/隔离范围

这并不奇怪，因为component（）定义了这样的范围创建：

scope: options.isolate === false ? true : {}

所以我的问题是：这是一个错误还是一般不支持在一个DOM元素上有多个组件？ 我知道我可以使用directive（），但考虑到Angular 2迁移，我宁愿把所有东西都移到component（）。

Answer 1

scope属性可以是true ，对象或falsy值：

• falsy：不会为该指令创建范围。 该指令将使用其父级的范围。

• true ：将为指令的元素创建一个原型继承自其父级的新子范围。 如果同一元素上的多个指令请求新范围，则只创建一个新范围。 新范围规则不适用于模板的根，因为模板的根始终获得新范围。

• {...} （对象哈希）：为指令的元素创建一个新的“隔离”范围。 'isolate'范围与正常范围的不同之处在于它不是原型继承自其父范围。 这在创建可重用组件时非常有用，这些组件不应该意外地读取或修改父范围中的数据。

来自Docs：

通常，可以将多个指令应用于一个元素，但可能存在一些限制，具体取决于指令所需的范围类型。 以下几点有助于解释这些限制。 为简单起见，只考虑了两个指令，但它也适用于几个指令：

• 无范围 + 无范围 =>两个不需要自己范围的指令将使用其父范围
• 子范围 + 无范围 =>两个指令将共享一个子范围
• 子范围 + 子范围 =>两个指令将共享一个子范围
• 隔离范围 + 无范围 =>隔离指令将使用它自己创建的隔离范围。 另一个指令将使用其父级的范围
• 孤立的范围 + 儿童范围 => 不会工作！ 只有一个范围可以与一个元素相关。 因此，这些指令不能应用于同一元素。
• 隔离范围 + 隔离范围 => 不行！ 只有一个范围可以与一个元素相关。 因此，这些指令不能应用于同一元素。

- AngularJS $ compile Service API Reference - scope

更新

这就是AngularJS博客关于组件的说法：

module.component

我们创建了一种更简单的注册组件指令的方法。 本质上，组件是特殊类型的指令，它们绑定到自定义元素（类似于<my-widget></my-widget> ），具有关联的模板和一些绑定。 现在，通过在AngularJS 1.5中使用.component（）方法，您可以使用非常少的代码行创建可重用的组件：

var myApp = angular.module("MyApplication", [])
myApp.component("my-widget", {
  templateUrl: "my-widget.html",
  controller: "MyWidgetController",
  bindings: {
    title: "="
  }
});

要了解有关AngularJS 1.5组件方法的更多信息，请阅读Todd Motto的文章： http ： //toddmotto.com/exploring-the-angular-1-5-component-method/

- http://angularjs.blogspot.com/2015/11/angularjs-15-beta2-and-14-releases.html

Answer 2

在上述答案和评论的帮助下，我得出以下结论：

component（）不支持在没有新范围的情况下创建组件。 这只能通过使用指令来完成（也在Angular 2中）。