AngularJS form指令为何/如何引入作用域？内置作用域引入指令有哪些？

Great question — understanding which directives create scopes is critical to avoiding common AngularJS pitfalls like unexpected data binding behavior. Let's dive into your two main questions:

Why & How does the form directive create a scope? #

The form directive (and its sibling ng-form for nested forms) creates a child scope (not an isolated scope) for a few key reasons:

1. State encapsulation: Forms have a lot of internal state — things like $valid, $invalid, $dirty, $pristine, and individual control states. Putting this state in a dedicated child scope prevents cluttering the parent scope with form-specific properties.
2. Independent control: Each form (or nested form) can manage its own validation and state without interfering with other forms or parent scope data.

Here's how it works:

• When AngularJS processes a <form> element with a name attribute, it creates a new child scope that inherits from the parent scope.
• The form instance itself is attached to this child scope using the name attribute as the property name. For example, if you have <form name="userForm">, the child scope will have a userForm object containing all the form's state and controls.
• Since it's a child scope, you can still access parent scope properties via $parent if needed, though best practice is to use dot notation in ng-model to avoid prototypal inheritance issues.

This diagram shows the parent scope → form child scope relationship, with the form instance (userForm) attached to the child scope, and $parent pointing back to the parent.

Full List of AngularJS Built-in Directives That Create Scopes #

AngularJS built-in directives that create scopes fall into two categories: those that create child scopes (which inherit from the parent) and those that create isolated scopes (which do not inherit automatically, requiring explicit bindings).

Child Scope-Creating Directives #

These directives generate a child scope that inherits all properties from the parent scope:

• ng-repeat: Creates a new child scope for every item in the collection, with special properties like $index, $first, $last available in each scope.
• ng-if: Creates a child scope only when the condition evaluates to true; the scope is destroyed when the condition becomes false.
• ng-controller: Instantiates a new child scope for the controller, encapsulating the controller's logic and data.
• form/ng-form: As discussed above, creates a child scope to manage form state.
• ng-switch-when: Creates a child scope for the matching branch of an ng-switch directive.
• ng-include: Loads the specified template into a new child scope (this is the default behavior; you can override it by passing a custom scope, but the built-in default uses a child scope).

Isolated Scope-Creating Directives #

These directives create a scope that does not inherit from the parent scope by default — you must explicitly define bindings to pass data in/out:

• ng-component (AngularJS 1.5+): Designed for building reusable components, this directive uses an isolated scope by default, with bindings defined via the component's bindings property.

Note: Directives like ng-model, ng-show, ng-hide, ng-class, and most others do not create new scopes — they operate directly on the current scope's properties.

内容的提问来源于stack exchange，提问作者jzyamateur