web-dev-qa-db-ja.com

Angularjs-引数をディレクティブに渡す

ディレクティブに引数を渡す方法があるのだろうか？

私がやりたいのは、次のようなコントローラーからのディレクティブを追加することです：

$scope.title = "title";
$scope.title2 = "title2";

angular.element(document.getElementById('wrapper')).append('<directive_name></directive_name>');

引数を同時に渡して、ディレクティブテンプレートのコンテンツをスコープにリンクすることはできますか？

ここにディレクティブがあります：

app.directive("directive_name", function(){
    return {
        restrict:'E',
        transclude:true,
        template:'<div class="title"><h2>{{title}}</h3></div>',
        replace:true
    };
})

同じディレクティブを$ scope.title2で使用したい場合はどうすればよいですか？

angularjscontrollerargumentsdirective
59
SKYnine

問題を解決した方法は次のとおりです。

ディレクティブ

app.directive("directive_name", function(){
    return {
        restrict: 'E',
        transclude: true,
        template: function(elem, attr){
           return '<div><h2>{{'+attr.scope+'}}</h2></div>';
        },
        replace: true
    };
})

コントローラー

$scope.building = function(data){
    var chart = angular.element(document.createElement('directive_name'));
    chart.attr('scope', data);
    $compile(chart)($scope);
    angular.element(document.getElementById('wrapper')).append(chart);
  }

同じディレクティブを使用して異なるスコープを使用し、動的に追加できるようになりました。

7
SKYnine

組み込みのAngular-directivesで行うように、カスタムディレクティブに引数を渡すことができます-directive-elementで属性を指定することにより：

angular.element(document.getElementById('wrapper'))
       .append('<directive-name title="title2"></directive-name>');

必要なのは、ディレクティブのファクトリ関数でscope（引数/パラメーターを含む）を定義することです。以下の例では、ディレクティブはtitle- parameterを取ります。次に、たとえばtemplateで、通常のAngular-wayを使用して使用できます：{{title}}

app.directive('directiveName', function(){
   return {
      restrict:'E',
      scope: {
         title: '@'
      },
      template:'<div class="title"><h2>{{title}}</h2></div>'
   };
});

バインドの方法/対象に応じて、異なるオプションがあります。

  • =は双方向バインディングです
  • @は単に値を読み取ります（一方向バインディング）
  • &は関数をバインドするために使用されます

場合によっては、「内部」名とは異なる「外部」名を使用することもできます。外部ではディレクティブ要素の属性名を意味し、内部ではディレクティブのスコープ内で使用される変数の名前を意味します。

たとえば、上記のディレクティブを見ると、title- propertyを内部で使用したい場合でも、タイトルに別の追加の属性を指定したくない場合があります。代わりに、次のようにディレクティブを使用します。

<directive-name="title2"></directive-name>

これは、スコープ定義で上記のオプションの後ろに名前を指定することで実現できます。

scope: {
    title: '@directiveName'
}

次のことにも注意してください。

  • HTML5仕様では、カスタム属性（これは基本的にAngularアプリケーションのいたるところにあります）の前にdata-を付ける必要があります。 Angularは、属性からdata-- prefixを取り除くことでこれをサポートします。したがって、上記の例では、要素（data-title="title2"）の属性を指定でき、内部的にはすべて同じになります。
  • 要素の属性は常に<div data-my-attribute="..." />の形式であり、コード（スコープオブジェクトのプロパティなど）ではmyAttributeの形式です。これに気付くまでに多くの時間を失いました。
  • 異なるAngularコンポーネント（コントローラー、ディレクティブ）の間でデータを交換/共有する別のアプローチについては、サービスまたはディレクティブコントローラーをご覧ください。
  • Angular homepage（directives） で詳細を確認できます。
133
PzYon

以下のように試すことができます：

app.directive("directive_name", function(){
return {
    restrict:'E',
    transclude:true,
    template:'<div class="title"><h2>{{title}}</h3></div>',
    scope:{
      accept:"="
    },
    replace:true
  };
})

'accept'属性の値と親スコープの間の双方向バインディングをセットアップします。

また、プロパティを使用して双方向のデータバインディングを設定することもできます： '='

たとえば、キーと値の両方をローカルスコープにバインドするには、次のようにします。

  scope:{
    key:'=',
    value:'='
  },

詳細については、 https://docs.angularjs.org/guide/directive

したがって、コントローラーからディレクティブに引数を渡したい場合は、以下のフィドルを参照してください

http://jsfiddle.net/jaimem/y85Ft/7/

それが役に立てば幸い..

6
SDK
<button my-directive="Push">Push to Go</button>

app.directive("myDirective", function() {
    return {
        restrict : "A",
         link: function(scope, Elm, attrs) {
                Elm.bind('click', function(event) {

                    alert("You pressed button: " + event.target.getAttribute('my-directive'));
                });
        }
    };
});

これが私がしたことです

ディレクティブをhtml属性として使用しており、HTMLファイルで次のようにパラメーターを渡しました。 my-directive="Push"そして、ディレクティブから、Mouse-clickイベントオブジェクトから取得しました。 event.target.getAttribute('my-directive')。

0
Sajith Dushmantha Samarathunga