角度指令コードは、スコープを変更しますが、テンプレートは、私は次のようなディレクティブを持って同じ値

Question

を示しています

.directive('myDirective', function() { 
    return { 
     restrict: 'AE', 
     replace: true, 
     templateUrl: '/myDirective.html?v=' + window.buildNumber, 
     link: function (scope, element, attrs) { 
      scope.itemClasses = attrs.itemClasses || ''; 
     } 
    } 
}) 

をし、それはテンプレートのは、次のようになります。

<div class="my-directive"> 
    <div class="items" ng-repeat="item in items"> 
     <div class="item {{ itemClasses }}">{{ item.title }}</div> 
    </div> 
</div> 

とそのディレクティブが異なる中で呼び出されました

<my-directive item-classes="col-md-6"></my-directive> 
... 
<my-directive item-classes="col-md-12"></my-directive> 

すべてのテンプレートは同じ値の012をレンダリングします（テンプレートごとに1つの呼び出し）。。同時にリンク機能が適切な値を設定します（私はconsole.log()の呼び出しでこの事実を確認しました）。

scope: true属性をディレクティブのコードに追加すると、すべて正常に動作します。だから、それは自分の継承されたスコープを持つように思えます。あなたは私にこのような行動を説明できますか？

ありがとうございます。

Answer 1

scope: trueを使用すると、ディレクティブの子スコープを作成すると同時に、親からプロパティも継承します（この場合、私はあなたのコントローラと思います）。つまり、あなたの指示句のすべてのインスタンスが適切なスコープを持つことになります。

scope: falseを使用すると、実際にはディレクティブにスコープはなく、スコープはその親と共有されます。

だから、あなたがこれを行うとき、scope:falseを持つ、バックあなたの質問に来て：あなたは親のスコープにitemClassesプロパティを設定している

scope.itemClasses = attrs.itemClasses || '';

。 これは、リンク機能では正常に動作しているように見えますが、現実にはコントローラの同じスコープ変数をオーバーライドするたびに発生します。

scope.itemClasses= 'col-md-6';

が、二回目は、実際には新しい値で、親の同じスコープの変数をオーバーライドします。

だから、あなたのケースでは、最初の時間は、あなたは親コントローラにスコープ変数を関連付けます：

scope.itemClasses= 'col-md-12';

それは理にかなっていますか？

Answer 2

属性から直接item-classesをバインドすると、基本的に属性値のコピーが作成されます。

このためのソリューションがある：あなたがinput-classesあなたがそうのように分離されたスコープを使用して結合入力をしたい場合：

{ 
    restrict: 'AE', 
    replace: true, 
    scope: { 
     itemClasses: '=' 
    }, 
    templateUrl: '/myDirective.html?v=' + window.buildNumber, 
    link: function (scope, element, attrs) { 
     // scope.itemClasses = attrs.itemClasses || ''; 
    } 
} 

それとも、あなたはあなたができる、分離されたスコープを使用したくない場合ユーザーattrs.$observe：

link: function (scope, element, attrs) { 
    attrs.$observe('itemClasses ', function(val) { 
     scope.itemClasses = val || ''; 
    }); 
}