Bagaimana saya bisa menambahkan arahan secara dinamis di AngularJS?

Saya memiliki versi yang sangat matang dari apa yang saya lakukan yang menyelesaikan masalah.

Saya punya yang sederhana directive. Setiap kali Anda mengklik suatu elemen, elemen itu menambahkan elemen lainnya. Namun, itu perlu dikompilasi terlebih dahulu untuk membuatnya dengan benar.

Penelitian saya menuntun saya $compile. Tetapi semua contoh menggunakan struktur rumit yang saya tidak benar-benar tahu cara mendaftar di sini.

Fiddles ada di sini: http://jsfiddle.net/paulocoelho/fBjbP/1/

Dan JS ada di sini:

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>");
            });
        }
    };
});

Solusi oleh Josh David Miller: http://jsfiddle.net/paulocoelho/fBjbP/2/

Anda memiliki banyak jQuery tidak berguna di sana, tetapi layanan $ compile sebenarnya sangat sederhana dalam hal ini:

.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 );
      };
    }
  };
});

Anda akan melihat bahwa saya juga mengevaluasi kembali arahan Anda untuk mengikuti beberapa praktik terbaik. Beri tahu saya jika ada pertanyaan tentang hal itu.

Sebagai tambahan untuk menyempurnakan Riceball, LEE menambahkan elemen-direktif baru

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

Menambahkan atribut-direktif baru ke elemen yang ada dapat dilakukan dengan menggunakan cara ini:

Katakanlah Anda ingin menambahkan on-the-fly my-directiveke spanelemen.

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

Semoga itu bisa membantu.

Secara dinamis menambahkan arahan pada angularjs memiliki dua gaya:

Tambahkan arahan sudut ke arahan lain

• memasukkan elemen baru (direktif)
• menyisipkan atribut baru (direktif) ke elemen

memasukkan elemen baru (direktif)

itu mudah. Dan Anda dapat menggunakan "tautan" atau "kompilasi".

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

menyisipkan atribut baru ke elemen

Sulit, dan membuat saya sakit kepala dalam dua hari.

Menggunakan "$ compile" akan meningkatkan kesalahan rekursif kritis !! Mungkin harus mengabaikan arahan saat ini ketika mengkompilasi ulang elemen.

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

Jadi, saya harus menemukan cara untuk memanggil fungsi "tautan" direktif. Sangat sulit untuk mendapatkan metode yang berguna yang tersembunyi jauh di dalam penutupan.

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)       

Sekarang, ini bekerja dengan baik.

function addAttr(scope, el, attrName, attrValue) {
  el.replaceWith($compile(el.clone().attr(attrName, attrValue))(scope));
}

Jawaban yang diterima oleh Josh David Miller bekerja sangat baik jika Anda mencoba untuk secara dinamis menambahkan arahan yang menggunakan inline template. Namun jika arahan Anda mengambil manfaat dari templateUrljawabannya tidak akan berhasil. Inilah yang bekerja untuk saya:

.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);
            }
        }
    }
}]);

Josh David Miller benar.

PCoelho, Jika Anda bertanya-tanya apa yang $compileada di balik layar dan bagaimana hasil HTML dihasilkan dari arahan, silakan lihat di bawah

The $compilelayanan mengkompilasi fragmen dari HTML ( "< test text='n' >< / test >") yang mencakup direktif ( "test" sebagai unsur) dan menghasilkan fungsi. Fungsi ini kemudian dapat dieksekusi dengan lingkup untuk mendapatkan "HTML output from a directive".

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

Lebih detail dengan contoh kode lengkap di sini: http://www.learn-angularjs-apps-projects.com/AngularJs/dynamically-add-directives-in-angularjs

Terinspirasi dari banyak jawaban sebelumnya saya telah datang dengan arahan "stroman" berikut yang akan menggantikan dirinya dengan arahan lain.

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
    }
  };
});

Penting: Daftarkan arahan yang ingin Anda gunakan restrict: 'C'. Seperti ini:

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

Anda bisa menggunakan seperti ini:

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

Untuk mendapatkan ini:

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

Protip. Jika Anda tidak ingin menggunakan arahan berdasarkan kelas maka Anda dapat mengubah '<div></div>'sesuatu yang Anda sukai. Misalnya memiliki atribut tetap yang berisi nama arahan yang diinginkan, bukan class.