AngularJS ドキュメントのスコープ ディレクティブの読み取り どれくらい知っていますか? angularjsドキュメント読み込みにおけるscopeディレクティブの詳細説明

この記事では、angularjsドキュメント読み込み用のscopeディレクティブを中心に紹介しており、angularjsドキュメント読み込み用のscopeディレクティブの完全な使い方を詳しく解説しています。今すぐこの記事を見てみましょう

scope

ディレクティブは、AngularJS の最も一般的に使用される機能であり、フロントエンドでコードの再利用を簡単に実装できます。命令の本質は、命令 scope の内部ドメインと外部ドメイン間の相互作用にあります。 AngularJS最常用的功能，让我们很容易在前台实现代码复用。而指令最精髓的地方，就在于指令内外域scope的交互方式。

本文属于一篇对文档的翻译加上一些自己对此的理解，因水平有限，可能某些地方翻译的不通顺，或者翻译的错了，欢迎大家批评指正。本文对scope的用法以及描述均翻译自AngularJS英文文档，文档地址：AngularJS 官方文档

scope属性的值可以是false，可以是true，也可以是对象。

false

false：这是指令scope的默认属性，不会为指令创建一个scope，这个指令会使用他的父scope。

true

true：为指令创建一个从父scope原型继承的子scope。

对象

{key: value}：为指令创建一个新的隔离scope，隔离scope和通常的scope的区别在于：隔离scope不从父scope做原型继承。

不从父scope做原型继承，这对于创建可重用的组件非常有用，可重用组件不应该从父scope读取或修改属性。

注意：一个有隔离scope但是没有template或templateUrl的指令不会将隔离scope应用到它的子元素。这是文档上写的，目前还没有理解到究竟是什么意思。

也可能是我翻译的不对，以下是原文：

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

隔离对象定义了源于指令元素的属性的本地scope属性集合。

scope绑定

以下几种绑定都是可以加参数的。

例：

scope: {
    name: '=nameAttr'
}

绑定的就是：<test name-attr="'hello'"></test>。

scope: {
    name: '='
}

绑定的就是：<test name="'hello'"></test>。

字符串绑定

@/@attr：绑定本地scope的属性到DOM属性的值，这个结果总是一个字符串，因为DOM属性就是字符串。随着DOM属性值的改变，指令scope上的属性也会改变，因为这个属性是在它的父scope上读取的。

双向绑定

=/=attr：本地scope的属性和传递到属性上的表达式建立双向绑定，该表达式是在父scope的范围内计算的。如果绑定的表达式不是可赋值的，或者它不是可选的但是指令中没有传，$compile:noassign异常就会被抛出，因为它无法和父scope同步。

默认地，$watch方法通常用来监听改变，并且根据对象的地址来进行相等判断。然而，如果一个对象地址或数组地址被传递到绑定的表达式中，比较的方法就是通过判断值是否相等。也可以使用=*/=*attr和$watchCollection进行浅监听。

这段话还不是很理解，在StackOverflow找到了一个靠谱的回答，但还不是很明白。AngularJS =* 问题

（想看更多就到PHP中文网angularjs学习手册中学习）

单向绑定

/<code><attr>：在本地<code>scope和传递到DOM属性上的表达式之间建立单向绑定，所有在DOM属性上表达式的改变会反映到scope的属性上，但是scope属性上的改变不会反映到DOM属性的表达式上。

但是这有两个警告：

1.单向绑定不是将父scope的值拷贝到隔离scope上，而是简单的设置相同的值。如果你传的是一个对象，那在隔离scope上对该对象的改变会反映到父scope

この記事は文書の翻訳に私自身の理解を加えたものであり、私のレベルが低いため、一部の部分がスムーズに翻訳されない可能性や、翻訳が間違っている可能性があります。どなたでも私を批判したり修正したりできます。この記事の scope の使用方法と説明は AngularJS の英語ドキュメントから翻訳したものです ドキュメントアドレス: AngularJS 公式ドキュメント🎜🎜 scope の値。 code> 属性は、false にすることも、true またはオブジェクトにすることもできます。 🎜

false

🎜false: これはディレクティブ scope のデフォルト属性です。scope は作成されません。このディレクティブは、その親の scope を使用します。 🎜

true

🎜true: 親 scope からプロトタイプ的に継承するディレクティブの子 scope を作成します。 🎜

Object

🎜{key: value}: ディレクティブの新しい分離 scope を作成し、scope を分離して通常どおりに実行します。 scope の違いは、分離された scope が親の scope からプロトタイプを継承しないことです。 🎜🎜親 scope からのプロトタイプの継承はありません。これは、再利用可能なコンポーネントを作成する場合に非常に役立ちます。親 scope からプロパティを読み取ったり、変更したりする必要はありません。 🎜🎜注: 分離された scope を持つが、template または templateUrl を持たないディレクティブは、scope を分離しません。 code > はその子要素に適用されます。文書にはこう書いてあるのですが、未だに意味が分かりません。 🎜🎜私の翻訳が間違っている可能性があります。以下は原文です: 🎜

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
      }
    }
  };
});

🎜分離オブジェクトは、ディレクティブ要素の属性から派生したローカルの scope 属性のコレクションを定義します。 🎜

スコープ バインディング

🎜 次のバインディングはすべてパラメータを追加できます。 🎜🎜例: 🎜rrreee🎜 は、<test name-attr="'hello'"></test> にバインドされています。 🎜rrreee🎜 は、<test name="'hello'"></test> にバインドされています。 🎜

文字列バインディング

🎜@/@attr: ローカルの scope 属性を DOM にバインドします。 属性を使用した場合、DOM 属性は文字列であるため、この結果は常に文字列になります。 DOM 属性値が変更されると、ディレクティブ scope の属性も変更されます。これは、この属性が親の scope で読み取られるためです。 🎜

双方向バインディング

🎜=/=attr: ローカル scope の属性と属性に渡される式 To双方向バインディングを確立すると、式は親 scope のスコープ内で評価されます。バインドされた式が割り当て可能でない場合、またはオプションではないがディレクティブで渡されない場合、親の scope $compile:noassign 例外がスローされます。 /コード>同期。 🎜🎜デフォルトでは、通常、変更を監視し、オブジェクトのアドレスに基づいて等価性の判断を実行するために $watch メソッドが使用されます。ただし、オブジェクト アドレスまたは配列アドレスがバインディング式に渡された場合、値が等しいかどうかをチェックして比較が行われます。浅いモニタリングには =*/=*attr および $watchCollection を使用することもできます。 🎜🎜この部分はまだよく理解できません。StackOverflow で信頼できる答えを見つけましたが、まだよく理解できません。 AngularJS =* 問題🎜🎜 (さらに詳しく知りたい場合は、PHP 中国語 Web サイト🎜angularjs 学習マニュアル🎜 にアクセスして学習してください)🎜

一方向バインディング

🎜 /<code> <attr>: ローカルの <code>scope と DOM 属性に渡される式の間の一方向バインディングをすべて 内で確立します。 DOM code> 属性の式の変更は scope 属性に反映されますが、scope 属性の変更は 属性には反映されません。 >DOM 属性。 🎜🎜ただし、2 つの警告があります: 🎜🎜1. 一方向バインディングは、親 scope の値を分離された scope にコピーしません。代わりに、同じ値を設定するだけです。オブジェクトを渡す場合、両方が同じオブジェクトを参照するため、分離された scope 上のオブジェクトへの変更は親の scope に反映されます。 🎜

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学习手册中学习），有问题的可以在下方留言提问

以上がAngularJS ドキュメントのスコープ ディレクティブの読み取り どれくらい知っていますか? angularjsドキュメント読み込みにおけるscopeディレクティブの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。