angular.element()를 사용하여 각도 지시문을 사용하여 요소를 삽입하는 올바른 방법

Question

angular.element()를 사용하여 DOM에 요소를 삽입하는 올바른 방법은 무엇입니까?

app.directive('validationTest', function(){ 
      return { 
       restrict: 'A', 
       replace: false,     
       link: function(scope, element, attrs){ 
        scope.call = function(){ 
         console.log('Someone clicked it'); 
        }; 

        var newElement = angular.element('<span ng-click="call()">').text('Yo Yo'); 
        element.append(newElement); 
       } 
      }; 
     }); 

이 코드에서는 지시문이 적용된 요소 내에 span 요소를 추가하려고합니다. mehtod가 추가 된 상위 div의 자식으로이 span 요소를 추가 할 수 있습니다.

그러나 코드에서 볼 수 있듯이 ng-click도이 기간과 연결되어 있습니다. 어떤 관점에서도 유용하지 않다는 것을 알고 있습니다. 데모 목적으로 만 사용됩니다. 따라서 일반적으로이 범위를 클릭하면 콘솔에 줄을 인쇄해야합니다. 그러나 그것은 일어나지 않습니다.

무엇이 여기에 있습니까? 이 append에 대해 잘못된 접근법을 사용했거나 코드에 오류가 있습니까?

Answer 1

를 컴파일, 당신은 컴파일하기 전에 연결 $로 할 것 DOM에 추가 :

오류가 발생하기 쉬운 대안은 DOM 조작을 컴파일 함수로 옮기는 것입니다. 그것은 templateUrl 또는 template을 사용하는 것이 좋습니다

app.directive('myDirective', function() { 
    return { 
     compile: function(element, attr) { 
       var newElement = angular.element('<span ng-click="call()">').text('Yo Yo'); 
       element.append(newElement); 
       return function(scope, element, attr) { 
       } 
     } 
    } 
}); 

Answer 2

각도 편집이 누락되었습니다. 컴파일은 DOM을 탐색하여 지시문을 찾고 초기화합니다. 컴파일을 호출하지 않으면 아무것도 ngClick을 초기화하지 않습니다.

app.directive('validationTest', ['$compile', function($compile){ 
     return { 
      restrict: 'A', 
      replace: false,     
      link: function(scope, element, attrs){ 
       scope.call = function(){ 
        console.log('Someone clicked it'); 
       }; 

       var newElement = angular.element('<span ng-click="call()">').text('Yo Yo'); 
       element.append(newElement); 
       $compile(element)(scope); 
      } 
     }; 
    }); 

을 추가 정보 : 컴파일 $ 사용이 시도 동적으로 DOM에 추가 된 HTML이 지침이있는 경우 $ https://docs.angularjs.org/api/ng/service/이

Answer 3

: 컴파일 단계에서 새로운 요소를 삽입함으로써, 새로운 HTML이 자동으로 연결 단계 (필요 없음 수동 컴파일/링크) 동안 연결됩니다.

보기 $compile docs.