web-dev-qa-db-ja.com

AngularJSにディレクティブを動的に追加する方法を教えてください。

私は自分がやっていることを非常に煮詰めたバージョンを持っています。

私は簡単なdirectiveを持っています。要素をクリックするたびに別の要素が追加されます。ただし、正しくレンダリングするには、最初にコンパイルする必要があります。

私の研究は私を$compileに導きました。しかし、すべての例は複雑な構造を使用しているため、ここでは適用方法を実際にはわかりません。

なぞなぞはここにあります： http://jsfiddle.net/paulocoelho/fBjbP/1/

そして、JSはここにあります：

var module = angular.module('testApp', [])
    .directive('test', function () {
    return {
        restrict: 'E',
        template: '<p>{{text}}</p>',
        scope: {
            text: '@text'
        },
        link:function(scope,element){
            $( element ).click(function(){
                // TODO: This does not do what it's supposed to :(
                $(this).parent().append("<test text='n'></test>");
            });
        }
    };
});

Josh David Millerによる解決策： http://jsfiddle.net/paulocoelho/fBjbP/2/

angularjsangularjs-directivedynamically-generated
209
PCoelho

そこには無意味なjQueryがたくさんありますが、$ compileサービスは実際には非常に単純です。

.directive( 'test', function ( $compile ) {
  return {
    restrict: 'E',
    scope: { text: '@' },
    template: '<p ng-click="add()">{{text}}</p>',
    controller: function ( $scope, $element ) {
      $scope.add = function () {
        var el = $compile( "<test text='n'></test>" )( $scope );
        $element.parent().append( el );
      };
    }
  };
});

ベストプラクティスに従うために、私もあなたのディレクティブをリファクタリングしたことに気付くでしょう。あなたがそれらのうちのどれかについて質問があるかどうか私に知らせてください。

255
Josh David Miller

完全なRiceball LEEの新しいelement-directiveの追加例

newElement = $compile("<div my-directive='n'></div>")($scope)
$element.parent().append(newElement)

既存の要素に新しい属性ディレクティブを追加するには、次のようにします。

span要素にその場でmy-directiveを追加したいとしましょう。

template: '<div>Hello <span>World</span></div>'

link: ($scope, $element, $attrs) ->

  span = $element.find('span').clone()
  span.attr('my-directive', 'my-directive')
  span = $compile(span)($scope)
  $element.find('span').replaceWith span

それが役立つことを願っています。

74
deadrunk

Angularjsにディレクティブを動的に追加する方法は2つあります。

Angularjsディレクティブを別のディレクティブに追加します

  • 新しい要素を挿入する（ディレクティブ）
  • 要素に新しい属性（ディレクティブ）を挿入する

新しい要素を挿入する（ディレクティブ）

それは簡単です。そしてuは "link"や "compile"で使うことができます。

var newElement = $compile( "<div my-diretive='n'></div>" )( $scope );
$element.parent().append( newElement );

要素に新しい属性を挿入する

それは大変です、そして2日以内に私を頭痛にさせます。

"$ compile"を使うと重大な再帰エラーが発生します。たぶんそれは要素を再コンパイルするとき現在の指令を無視するべきです。

$element.$set("myDirective", "expression");
var newElement = $compile( $element )( $scope ); // critical recursive error.
var newElement = angular.copy(element);          // the same error too.
$element.replaceWith( newElement );

それで、ディレクティブの "link"関数を呼び出す方法を見つけなければなりません。クロージャの奥深くに隠されている便利なメソッドを入手するのは非常に難しいです。

compile: (tElement, tAttrs, transclude) ->
   links = []
   myDirectiveLink = $injector.get('myDirective'+'Directive')[0] #this is the way
   links.Push myDirectiveLink
   myAnotherDirectiveLink = ($scope, $element, attrs) ->
       #....
   links.Push myAnotherDirectiveLink
   return (scope, Elm, attrs, ctrl) ->
       for link in links
           link(scope, Elm, attrs, ctrl)

今、それはうまくいっています。

45
Riceball LEE
function addAttr(scope, el, attrName, attrValue) {
  el.replaceWith($compile(el.clone().attr(attrName, attrValue))(scope));
}
9
user1212212

インラインのtemplateを使うディレクティブを動的に追加しようとしているのであれば、Josh David Millerによって受け入れられている答えはとてもうまくいきます。しかし、あなたの指令がtemplateUrlを利用するのであれば、彼の答えは機能しません。これは私のために働いたものです：

.directive('helperModal', [, "$compile", "$timeout", function ($compile, $timeout) {
    return {
        restrict: 'E',
        replace: true,
        scope: {}, 
        templateUrl: "app/views/modal.html",
        link: function (scope, element, attrs) {
            scope.modalTitle = attrs.modaltitle;
            scope.modalContentDirective = attrs.modalcontentdirective;
        },
        controller: function ($scope, $element, $attrs) {
            if ($attrs.modalcontentdirective != undefined && $attrs.modalcontentdirective != '') {
                var el = $compile($attrs.modalcontentdirective)($scope);
                $timeout(function () {
                    $scope.$digest();
                    $element.find('.modal-body').append(el);
                }, 0);
            }
        }
    }
}]);
5
ferics2

Josh David Millerは正しいです。

PCoelho、$compileが舞台裏で何をするのか、そしてディレクティブからHTML出力がどのように生成されるのか疑問に思う場合は、以下をご覧ください。

$compileサービスは、ディレクティブ（ "test"を要素として含む）を含むHTMLのフラグメント（"< test text='n' >< / test >"）をコンパイルして関数を生成します。この関数は、「ディレクティブからのHTML出力」を取得するためのスコープで実行できます。

var compileFunction = $compile("< test text='n' > < / test >");
var HtmlOutputFromDirective = compileFunction($scope);

フルコードサンプルの詳細はこちら： http://www.learn-angularjs-apps-projects.com/AngularJs/dynamically-add-directives-in-angularjs

5
Danial Lokman

以前の答えの多くからインスピレーションを得た私は、次の "stroman"ディレクティブを思いついた。

app.directive('stroman', function($compile) {
  return {
    link: function(scope, el, attrName) {
      var newElem = angular.element('<div></div>');
      // Copying all of the attributes
      for (let prop in attrName.$attr) {
        newElem.attr(prop, attrName[prop]);
      }
      el.replaceWith($compile(newElem)(scope)); // Replacing
    }
  };
});

重要：使用したいディレクティブをrestrict: 'C'で登録してください。このような：

app.directive('my-directive', function() {
  return {
    restrict: 'C',
    template: 'Hi there',
  };
});

あなたはこのように使うことができます：

<stroman class="my-directive other-class" randomProperty="8"></stroman>

これを取得するには：

<div class="my-directive other-class" randomProperty="8">Hi there</div>

Protip。クラスに基づくディレクティブを使いたくない場合は、'<div></div>'を好きなものに変更することができます。例えば。 classの代わりに目的のディレクティブの名前を含む固定属性を持ってください。

4
Gábor Imre