AngularJS Documentation Reading Scope Directive How much do you know? Detailed explanation of scope directive in angularjs document reading

This article mainly introduces the scope directive for angularjs document reading. This article explains in detail the complete use of the scope directive for angularjs document reading. Let’s take a look at this article now

scope

directive is the most popular one in AngularJS Commonly used functions make it easy for us to implement code reuse in the frontend. The essence of the instruction lies in the interaction between the inner and outer domains of the instruction scope.

This article is a translation of a document plus some of my own understanding of it. Due to my limited level, there may be some places where the translation is not smooth or the translation is wrong. You are welcome to criticize and correct me. The usage and description of scope in this article are translated from the AngularJS English document. Document address: AngularJS official document

scope The value of the attribute can be false, which can be true or an object.

false

false: This is the default attribute of the directive scope. A scope will not be created for the directive. This The directive will use its parent scope.

true

true: Creates a child scope for the directive that prototypically inherits from the parent scope.

Object

{key: value}: Creates a new isolation scope for the directive, isolation scope and usually The difference between scope is: Isolated scope does not do prototypal inheritance from the parent scope.

Does not do prototypal inheritance from the parent scope. This is useful for creating reusable components. Reusable components should not read or modify properties from the parent scope.

Note: A directive with isolate scope but without template or templateUrl will not isolate scopeApply to its child elements. This is written in the document, but I still don’t understand what it means.

Maybe my translation is wrong, the following is the original text:

Note that an isolate scope directive without a template or templateUrl will not apply the isolate scope to its children elements.

The isolation object defines a local scope attribute collection originating from the attributes of the directive element.

scope binding

The following bindings can all add parameters.

Example:

scope: {
    name: '=nameAttr'
}

is bound to: <test name-attr="'hello'"></test>.

scope: {
    name: '='
}

is bound to: <test name="'hello'"></test>.

String binding

@/@attr: Bind local scope attributes to DOM The value of the attribute, this result is always a string, because the DOM attribute is a string. As the DOM property value changes, the property on the directive scope will also change, because this property is read on its parent scope.

Two-way binding

=/=attr: attributes of the local scope and expressions passed to the attributes To establish a two-way binding, the expression is evaluated within the scope of the parent scope. If the bound expression is not assignable, or it is not optional but is not passed in the directive, a $compile:noassign exception will be thrown because it cannot be combined with the parent scopeSynchronize.

By default, the $watch method is usually used to monitor changes and perform equality judgments based on the address of the object. However, if an object address or array address is passed into a bound expression, the comparison is by checking whether the values ​​are equal. You can also use =*/=*attr and $watchCollection for shallow monitoring.

I still don’t quite understand this passage. I found a reliable answer in StackOverflow, but I still don’t quite understand it. AngularJS =* Problem

(If you want to see more, go to the PHP Chinese websiteangularjs learning manual to learn)

One-way binding

/<code><attr>: Establishes a one-way binding between the local <code>scope and the expression passed to the DOM attribute, all Changes in the expression on the DOM attribute will be reflected on the scope attribute, but changes on the scope attribute will not be reflected on the DOMOn the expression of the attribute.

But there are two warnings:

1. One-way binding does not copy the value of the parent scope to the isolated scope , but simply set the same value. If you pass an object, changes to the object on the isolated scope will be reflected on the parent scope, because both reference the same object.

2.单向绑定监视的是父值地址的改变。这意味着在父值上的$watch仅仅在引用的地址发生改变时才会生效。大多数情况下，这是不需要关心的。但是必须要知道如果你单向绑定了一个对象，然后会改变隔离scope上的对象，如果改变了父scope上的该对象的一个属性，这个改变是不会传递到隔离scope上的，因为这个对象的地址没有改变，除非你赋值一个新的对象。

如果不打算将隔离scope的改变传播会父节点，单向绑定是很有用的。

绑定方法

&/&attr：在父scope提供一个可执行的表达式，就是传一个方法。

设置可选

所有的绑定(@, =, )都能通过在表达式上添加<code>?设置为可选的，这个标志必须在绑定模式之后，属性名称之前。

可选和不可选的区别在于：

• 绑定是可选的，这个属性不会被定义。

• 绑定不是可选的，这个属性被定义了。

以下是AngularJS文档中对可选指令的示例代码。

app.directive('testDir', function() {
  return {
    scope: {
      notoptional: '=',
      optional: '=?',
    },
    bindToController: true,
    controller: function() {
      this.$onInit = function() {
        console.log(this.hasOwnProperty('notoptional')); // true
        console.log(this.hasOwnProperty('optional')); // false
      }
    }
  };
});

本篇文章到这就结束了（想看更多就到PHP中文网angularjs学习手册中学习），有问题的可以在下方留言提问

The above is the detailed content of AngularJS Documentation Reading Scope Directive How much do you know? Detailed explanation of scope directive in angularjs document reading. For more information, please follow other related articles on the PHP Chinese website!