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

そして最後に、テンプレートは次のようになります...私はディレクティブ要素を見つけることについてもっと賢いことができますが、これに対して私は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>