AngularJs 命令のscope属性の詳細な説明に関する簡単な説明

AngularJS は、directive() メソッド クラスを使用してディレクティブを定義します。

.directive("name",function(){
  return{
     
  };
})

上記は、ディレクティブを定義するための主要なフレームワークです:

1 の最初のパラメーター: name は、定義されたものを表します。 Name (angularjs はこのコマンドを登録するためにこの名前を使用します)

2. 2 番目のパラメーター: function。スイート ポテトはオブジェクトまたは関数を返す必要がありますが、通常はオブジェクトを返します。 return に続くのは、返されたオブジェクトです。

返されたオブジェクトにはscope属性があり、命令のスコープを変更するために使用されます。

ディレクティブを登録するたびに、このディレクティブは次の質問を検討します:独自のスコープを使用するべきか、親スコープから継承する子スコープを作成するべきか、

あるいは独立したスコープを作成するか(外部スコープに依存しない) ;

scope 属性の値は false、true、{ } で、それぞれ上記のスコープ、サブスコープ、分離スコープに対応します。

これらの属性の使用法を完全に理解するために 3 つの例を示しましょう。

1.scope: false

html code

<div ng-controller="myController">
  <div>
    <span>我的名字是</span><span ng-bind="name"></span><br/>
    <span>我的年龄是</span><span ng-bind="age"></span>
    <div my-directive></div>
  </div>
</div>
<script>
  angular.module("app",[])
    .controller("myController",function($scope){
      $scope.name = "kobe";
      $scope.age = 39;
    })
    .directive("myDirective",function(){
      return{
        scope:false,
        restrict:"A",
        template:"<div><h1>下面的部分是我们创建指令时生成的</h1>"+
            "我的名字是:<span ng-bind=&#39;name&#39;></span><br/>"+
            "我的年龄是:<span ng-bind=&#39;age&#39;></span><br/>"+
            "输入你的新名字:<input type=&#39;text&#39; ng-model=&#39;name&#39;>"+
            "</div>"
      };
    })
</script>

Effect:

この時点では、コマンドのスコープはmyControllerのスコープと同じなので、入力に新しい名前を入力すると

2. スコープ: true

この時点でページに新しい名前を入力すると、そのページの上部と下部の名前が変更されます。図に示すように、各実験の結果は異なります。

ここでは、上部の名前は変更されていませんが、下部の名前は変更されています。

この実験では、次の 2 つの点に注意する必要があります:

1. ページに入るか更新した直後では、上位スコープと下位スコープの名前は同じです。子スコープは親スコープとメソッドの属性を継承します。したがって、名前と年齢は子スコープでは定義されていませんが、親スコープの myController から継承できます。したがって、上下に同じ名前と年齢が表示されます。

2. 新しい名前を入力すると、上の部分は変更されず、下の部分が変更されます。その理由は、子スコープの名前と年齢を変更するため、上の名前が親に属することになります。スコープ、および親スコープのサブスコープにはアクセスできないため、

そのため、上記の名前の値は変更されません。

3. スコープ: { }

コマンドのスコープ部分は次のように変更されます:

scope:{
  name:"@",
  age:"@"
},

現時点では、現在のスコープが分離されているため、値が存在しないことがわかります。親の役割のドメインのプロパティとメソッドがわかりません。次のように命令の後に値を割り当てることができます:

<div my-directive name="aaa" age="33"></div>

同じ理由で、このスコープは完全に分離されているため、変更は命令自体のスコープの属性とメソッドに対してのみ有効であり、何も行いません。他のスコープでは、 myController スコープの名前は変わりません。