AngularJS document reading directive scope

This article mainly introduces the scope command for reading AngularJS documents. It has certain reference value. Now I share it with you. Friends in need can refer to the

scope

command. It is the most commonly used function in AngularJS, allowing us to easily 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

One-way binding

/<code><attr>: In local <code>scope and pass A one-way binding is established between the expressions on the DOM attribute. All changes in the expression on the DOM attribute will be reflected on the scope attribute. But changes to the scope attribute will not be reflected in the expression of the DOM 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. One-way binding monitors changes in the parent value address. This means that $watch on the parent value will only take effect if the referenced address changes. In most cases, this is nothing to worry about. But you must know that if you bind an object one-way, then the object on the isolation scope will be changed. If you change an attribute of the object on the parent scope, this change It will not be passed to the isolation scope because the address of this object has not changed unless you assign a new object.

One-way binding is useful if you do not intend to propagate changes to the isolated scope to the parent node.

绑定方法

&/&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 表格导出添加额外信息

angularjs的数据绑定

The above is the detailed content of AngularJS document reading directive scope. For more information, please follow other related articles on the PHP Chinese website!