web-dev-qa-db-ja.com

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

以下に示すように、ディレクティブを使用していくつかのタグを作成し、<div>に追加しようとしています。

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>

Attrsでは、この構造があります：

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

しかし、attrs.createControlを使用しようとすると、undefinedが表示され、その理由がわかりません。実際の質問：スコープ変数をディレクティブに渡す方法は？

javascriptangularjsscopedirective
27
I159

directive docs のAttributes/observing interpolated attributesセクションをお読みください。リンク段階では、属性は設定されていません。

attrs.$observeまたは$timeoutの使用を含むいくつかの方法があります。

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

15
charlietfl
    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>
34
Joe Hanink

_v.type_が変更される可能性がある場合（つまり、補間（{{}}を使用する必要がある場合）、ディレクティブに含めるスコープのタイプに応じて、@ charlietflまたは@Joeのanswserを使用します。

_v.type_が変更されない場合（つまり、リンク関数が値を取得する必要があるのは1回だけで、リンク関数の実行時にこれらの値が設定されることが保証されている場合）、 を使用できます代わりに$ parse または $ eval 。これには、$ watchesが作成されないというわずかなパフォーマンス上の利点があります。 （$observe()および_=_を使用すると、Angularはダイジェストサイクルごとに評価される$ watchesを設定します。）

_<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

15
Mark Rajcok