AngularJS에서 디렉티브를 동적으로 추가하려면 어떻게 해야 합니까?

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

솔루션 by Josh David Miller: http://jsfiddle.net/paulocoelho/fBjbP/2/

의미없는 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 );
      };
    }
  };
});

베스트 프랙티스를 따르기 위해 당신의 지시도 리팩터링한 것을 알겠죠?그 중 궁금한 것이 있으면 알려주세요.

완벽한 Riceball LEE의 새로운 요소 지향성 추가 예시

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

기존 요소에 새로운 Atribute-direction을 추가하는 방법은 다음과 같습니다.

온더플라이를 추가한다고 칩시다.my-directive에게span요소.

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

도움이 됐으면 좋겠다.

angularjs에 동적으로 지시문을 추가하는 방법에는 두 가지 스타일이 있습니다.

angularjs 지시어를 다른 지시어에 추가합니다.

• 새로운 요소(물건)를 삽입하는 것
• 요소에 새로운 속성(물리)을 삽입하다

새로운 요소(물건)를 삽입하는 것

간단해.또한 "link" 또는 "compile"에서 사용할 수 있습니다.

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

요소에 새 속성 삽입

힘들고, 이틀 안에 머리가 아파요.

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

그래서 지시어 "링크" 함수를 호출하는 방법을 찾아야 합니다.클로저에 깊이 숨어 있는 유용한 방법을 찾는 것은 매우 어렵습니다.

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)       

지금은 잘 되고 있어요.

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

Josh David Miller에 의해 받아들여진 답변은 인라인을 사용하는 지시어를 동적으로 추가하려고 할 때 매우 효과적입니다.template하지만, 당신의 지시가 다음 사항을 활용한다면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);
            }
        }
    }
}]);

조쉬 데이비드 밀러 말이 맞아요

PCoelho, 혹시 궁금하실까 봐$compile이면에서는, HTML 출력이 디렉티브로부터 어떻게 생성되는지, 이하를 봐 주세요.

$compileservice htmlHTML fragment)의를 컴파일합니다."< test text='n' >< / test >"test그런 다음 이 함수를 스코프로 실행하여 "지령에서 HTML 출력"을 가져올 수 있습니다.

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

풀코드 샘플에 대한 자세한 내용은http://http://www.learn-angularjs-apps-projects.com/AngularJs/dynamically-add-directives-in-angularjs 를 참조해 주세요.

지금까지의 많은 답변에서 영감을 얻어 다음과 같은 '스트로맨' 지령을 생각해 냈습니다.이 지령은 다른 지령과 대체될 것입니다.

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

언급URL : https://stackoverflow.com/questions/15279244/how-can-i-dynamically-add-a-directive-in-angularjs