How to set scope to false with Angular 1.5 component() method

Question

I want to use the component() method of angular 1.5. However, it seems impossible to apply different components on the same DOM element. This results from the fact, that regardless how I set the isolate property in the component() call, a new scope is created, leading to the error message:

[$compile:multidir] Multiple directives [...] asking for new/isolated scope

This is not surprising, as the component() defines scope creation like this:

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

So my question is: Is this a bug or is it generally not supported to have multiple components on one DOM element? I know I could use directive(), but having Angular 2 migration in mind, I would rather move everything to component().

Answer 1

The scope property can be true , an object or a falsy value:

• falsy: No scope will be created for the directive. The directive will use its parent's scope.

• true : A new child scope that prototypically inherits from its parent will be created for the directive's element. If multiple directives on the same element request a new scope, only one new scope is created. The new scope rule does not apply for the root of the template since the root of the template always gets a new scope.

• {...} (an object hash): A new "isolate" scope is created for the directive's element. The 'isolate' scope differs from normal scope in that it does not prototypically inherit from its parent scope. This is useful when creating reusable components, which should not accidentally read or modify data in the parent scope.

From the Docs:

In general it's possible to apply more than one directive to one element, but there might be limitations depending on the type of scope required by the directives. The following points will help explain these limitations. For simplicity only two directives are taken into account, but it is also applicable for several directives:

• no scope + no scope => Two directives which don't require their own scope will use their parent's scope
• child scope + no scope => Both directives will share one single child scope
• child scope + child scope => Both directives will share one single child scope
• isolated scope + no scope => The isolated directive will use it's own created isolated scope. The other directive will use its parent's scope
• isolated scope + child scope => Won't work! Only one scope can be related to one element. Therefore these directives cannot be applied to the same element.
• isolated scope + isolated scope => Won't work! Only one scope can be related to one element. Therefore these directives cannot be applied to the same element.

-- AngularJS $compile Service API Reference -- scope

Update

This is what the AngularJS Blog says about components:

module.component

We have created a more simplistic way of registering component directives. In essence, components are special kinds of directives, which are bound to a custom element (something like <my-widget></my-widget> ), with an associated template and some bindings. Now, by using the .component() method in AngularJS 1.5, you can create a reusable component with very few lines of code:

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

To learn more about the AngularJS 1.5 component method please read Todd Motto's article: 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

With help from the answer and comments above, I came to the following conclusion:

The component() does not support creating components without new scopes. This can only be done by using directives (also in Angular 2).