Jak mogę dynamicznie dodać dyrektywę w AngularJS?

Mam bardzo spartaczoną wersję tego, co robię, przez co problem się pojawia.

Mam prosty directive. Każde kliknięcie elementu powoduje dodanie kolejnego. Jednak najpierw trzeba go skompilować, aby poprawnie wyrenderować.

Doprowadziły mnie moje badania $compile. Ale wszystkie przykłady wykorzystują skomplikowaną strukturę, której tak naprawdę nie wiem, jak się tutaj zastosować.

Fiddles są tutaj: http://jsfiddle.net/paulocoelho/fBjbP/1/

A JS jest tutaj:

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

Rozwiązanie Josh David Miller: http://jsfiddle.net/paulocoelho/fBjbP/2/

Masz tam wiele bezsensownych jQuery, ale usługa kompilacji $ jest w tym przypadku bardzo prosta :

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

Zauważysz, że zreformowałem również twoją dyrektywę, aby zastosować się do najlepszych praktyk. Daj mi znać, jeśli masz pytania dotyczące któregokolwiek z nich.

Oprócz idealnego przykładu Riceball LEE dodania nowej dyrektywy elementowej

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

Dodanie nowej dyrektywy atrybutowej do istniejącego elementu można wykonać w następujący sposób:

Powiedzmy, że chcesz dodać on-the-fly my-directivedo spanelementu.

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

Mam nadzieję, że to pomaga.

Dynamiczne dodawanie dyrektyw do angularjs ma dwa style:

Dodaj dyrektywę angularjs do innej dyrektywy

• wstawianie nowego elementu (dyrektywy)
• wstawienie nowego atrybutu (dyrektywy) do elementu

wstawianie nowego elementu (dyrektywy)

To proste. I możesz użyć w „link” lub „kompilacji”.

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

wstawianie nowego atrybutu do elementu

To trudne i sprawia mi ból głowy w ciągu dwóch dni.

Użycie „$ compile” spowoduje krytyczny błąd rekursywny !! Może powinien zignorować obecną dyrektywę podczas ponownej kompilacji elementu.

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

Muszę więc znaleźć sposób na wywołanie funkcji „link” dyrektywy. Bardzo trudno jest znaleźć przydatne metody ukryte głęboko w zamknięciach.

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)       

Teraz działa dobrze.

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

Odpowiedź zaakceptowana przez Josha Davida Millera działa świetnie, jeśli próbujesz dynamicznie dodać dyrektywę, która używa wbudowanego template. Jednak jeśli Twoja dyrektywa skorzysta z templateUrljego odpowiedzi, nie zadziała. Oto, co zadziałało dla mnie:

.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 ma rację.

PCoelho, jeśli zastanawiasz się, co $compiledzieje się za kulisami i jak generowany jest wynik HTML z dyrektywy, spójrz poniżej

$compileSerwis kompiluje fragment HTML ( "< test text='n' >< / test >"), który zawiera dyrektywy ( „test” jako element) i wywołuje funkcję. Tę funkcję można następnie wykonać z zakresem, aby uzyskać „wynik HTML z dyrektywy”.

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

Więcej szczegółów z pełnymi przykładami kodu tutaj: http://www.learn-angularjs-apps-projects.com/AngularJs/dynamically-add-directives-in-angularjs

Zainspirowany wieloma wcześniejszymi odpowiedziami wymyśliłem następującą dyrektywę „stroman”, która zastąpi się innymi dyrektywami.

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

Ważne: Zarejestruj dyrektywy, których chcesz używać restrict: 'C'. Lubię to:

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

Możesz użyć w ten sposób:

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

Aby uzyskać to:

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

Protip Jeśli nie chcesz używać dyrektyw opartych na klasach, możesz zmienić '<div></div>'na coś, co lubisz. Np. Mają stały atrybut, który zawiera nazwę żądanej dyrektywy zamiast class.