AngularJS - ng-bind-html에서 동적 내용의 지시 함수를 호출하는 방법은 무엇입니까?

Question

HTML 콘텐츠를 동적으로로드하는 지시문을 만들면 생성 된 HTML에서 해당 지시문의 함수를 호출 할 수없는 것처럼 보입니다. 내 생각 엔 콘텐츠가 지시문에서 생성 된 후에 링크되어야한다는 것입니다. 동적 인 내용을 변경 한 후에 요소를 컴파일하려고 시도하지만 도움이되지 않습니다. 함수는 결코 호출되지 않습니다. 이것을 할 수있는 방법이 있습니까? (많은 미리 감사드립니다!)

아래 코드에서 지침의 템플릿에서 doIt() 함수에 대한 정적 호출이 있음을 알 수 있습니다. 그거야. 그러나 동적 콘텐츠 내에서 동일한 함수에 대한 호출이 작동하지 않습니다. 여기

<issue obj="obj" label="Make Dynamic Content"></issue> 

내 지시어입니다 : 여기

내 지시를 호출하는 요소의

(function() { 
angular.module('myModule').directive('issue', function ($compile, $sce) { 
    return { 
     restrict: 'EA', 
     scope: { 
      label: '@', 
      obj: '=' 
     }, 
     templateUrl: 'components/docs/docs.issue.html', 
     link: function (scope, element, attrs){ 

      scope.theLabel = attrs.label; 

      scope.doIt = function() { 
       alert("DOIT CALLED FROM WITHIN ISSUE"); 
      }; 

      scope.showIssue = function() { 
       // THIS CALL TO doIt() FAILS -- NEVER GETS CALLED... 
       var s = '<p>Dynamic content: <br><a href="" ng-click="doIt()">Click Me</a></p>'; 
       scope.obj = {content: $sce.trustAsHtml(s)}; 
       jQuery('#issue-panel').show(); 
       $compile(element)(scope); 
      }; 
     } 
    }; 
}); 
}).call(this); 

그리고 여기 지시어에 대한 HTML 템플릿입니다 ... {{theLabel}}에 말할 것이다 "확인 동적 콘텐츠 "입니다. 클릭하면 obj.content 내에 동적 컨텐츠가 생성됩니다. 생성 된 내용 위에 표시되는 doIt() 정적 호출이 있습니다.

<div id="win-container"> 
<a href="" ng-click="showIssue()"> 
    {{theLabel}} 
</a> 
<div id="issue-panel"> 
    <div class="topicWin-content"> 
     <!-- THIS CALL TO doIt() WORKS... --> 
     <p>Static content:<br> <a href="" ng-click="doIt()">Static Click</a></p> 
     <div ng-bind-html="obj.content"></div> 
    </div> 
</div> 
</div> 

Answer 1

문제를 해결할 수 있다고 생각합니다. 필자는 지시문에서 호출하고자하는 함수를 노출 한 다음 원하는 함수를 호출하는 템플릿에 임의의 함수를 구현합니다. 그런 다음 생성 된 컨텐츠의 함수가 해당 임의 함수를 호출합니다. 엄밀히 말하면,이 일은 내가하는 일이 아니지만, 일을 끝내고 ... 나는 내용을 생성 할 수 있고, 생성 된 내용 안에서 내 지시어를 부를 수있다.

는 directiveI 이렇게 호출하려면 - FUNC 속성주의 :

<issue id="cudTest" obj="obj" func="func" label="Make Dynamic Content"></issue> 

그런 다음 지시어는 다음과 같습니다

(function() { 
angular.module('myModule').directive('issue', function ($compile, $sce) { 
    return { 
     restrict: 'EA', 
     scope: { 
      label: '@', 
      func: '=', 
      obj: '=' 
     }, 
     templateUrl: 'components/docs/docs.issue.html', 
     link: function (scope, element, attrs){ 

      scope.obj = {}; 

      scope.theLabel = attrs.label; 

      scope.doIt = function(s) { 
       alert("DOIT CALLED FROM WITHIN ISSUE: "+s); 
      }; 

      scope.func = scope.doIt; 

      scope.showIssue = function() { 
       // THIS CALL TO doIt() WORKS!!! 
       var arg = "'This is a template call from dynamically generated content!'"; 
       var s = s+'<p>TEST content: <br><a onclick="javascript:templateCall('+arg+')">TEST Click Me 2!</a></p>'; 
       scope.obj.content = $sce.trustAsHtml(s); 
       jQuery('#issue-panel').show(); 
      }; 
     } 
    }; 
}); 
}).call(this); 

그리고 마지막으로, 템플릿 ...이 모양을 I 지시어 요소를 찾는 데 더 영리 할 수 ​​있지만 ID를 사용하고 있습니다. ID :

<script type="text/javascript"> 

var templateCall = function(s) { 
    var thisElem = document.getElementById("cudTest"); 
    var myScope = angular.element(thisElem).scope(); 
    myScope.$apply(function() { 
     myScope.func(s); 
    }); 
} 
</script> 

<a href="" ng-click="showIssue()">{{theLabel}}</a> 
<!-- THIS CALL TO doIt() WORKS... --> 
<p>Static content:<br> 
<a ng-click="doIt('This is a static call')">Static Click</a></p> 
<div ng-bind-html="obj.content"></div>