Angularjs：スコープ変数をディレクティブに渡す方法は？

Question

私は、以下のように<div>に複数のタグを作成して追加するディレクティブを使用しようとしています：

$$element: b.fn.b.init[1] 
$$observers: Object 
$attr: Object 
createControl: "date" 
style: "margin-right: 15px" 
__proto__: Object 

をしかし、私はattrs.createControl Iを使用しようとすると：私はこのような構成を持っているattrsには

module.directive('createControl', function(){ 
    return function(scope, element, attrs){  
    console.log(attrs.createControl); // undefined  
    }           
});           


<div class="control-group" ng-repeat="(k, v) in selectedControls"> 
    <div create-control="{{ v.type }}"></div> 
</div> 

undefinedを取得し、私はなぜ理解していない。実際の質問：スコープ変数を指示にどのように渡すのですか？

Answer 1

Read 補間された属性の属性/観察directive docsのセクション。リンク段階の間、属性は設定されていません。

attrs.$observeまたは$timeoutを含むいくつかの方法があります。 v.typeが変更される可能性があり

app.directive('createControl', function($timeout){ 
return function(scope, element, attrs){ 
     attrs.$observe('createControl',function(){ 
     console.log(' type:',attrs.createControl); 
     element.text('Directive text, type is: '+attrs.createControl); 
     }); 
    } 
}) ; 

DEMO

Answer 2

app.directive('createControl', function() { 
     return { 
     scope: { 
      createControl:'=' 
     }, 
     link: function(scope, element, attrs){  
      element.text(scope.createControl);  
     }  
     } 
    }) 

    <div class="control-group" ng-repeat="v in [{type:'green'}, {type:'brown'}]"> 
    <div create-control="v.type"></div> 
    </div> 

Answer 3

場合（つまり、あなたは本当に補間を使用する必要がある - {{}}秒）に応じて、charlietflさん@またはジョーのanswser @使用ディレクティブに含めるスコープのタイプ。

v.typeは（つまり、あなたのリンク機能は一度だけの値を取得する必要があり、これらの値は、あなたのリンク機能の実行時に設定されることが保証されている）に変更はありません場合は、代わりに$parseまたは$evalを使用することができます。これは、$ watchが作成されないという点でわずかなパフォーマンス上の利点があります。 （$observe()と=では、角度はすべての消化サイクルを評価され$時計を、設定します。）

<div create-control="v.type"></div> 

app.directive('createControl', function ($parse) { 
    return function (scope, element, attrs) { 
     console.log('$eval type:', scope.$eval(attrs.createControl)); 
     var type = $parse(attrs.createControl)(scope); 
     console.log('$parse type:', type); 
     element.text('Directive text, type is: ' + type); 
    } 
}); 

demo