`.append`の内部で` ng-click`を使用することは可能ですか

Question

.appendの中に配置された角度を使って1つのメソッドを呼び出そうとしています。
しかし、メソッドが呼び出されていません。ng-clickを.appendに含めることができますか？そうでない場合は、要素を角度で追加する方法がありますか？

var app=angular 
.module('myApp',[]) 
.controller('myController',function($scope){ 

    $scope.clickMe = function(){ 
     $('.paragraph').append('<span ng-click="closeMe()"><i class="fa fa-times" aria-hidden="true"></i></span>'); 
    }  
    $scope.closeMe = function(){ 
    alert("closed") 
    } 
}) 

サンプル：https://jsfiddle.net/fjhbbnno/

Answer 1

まずあなたはNG-クリックして、コントローラスコープに同様の角度ディレクティブをバインドするために動的コンパイルを行う必要があるでしょう、

var el = '<span ng-click="closeMe()"><i class="fa fa-times" aria-hidden="true"></i></span>'; 
var compiledElement = $compile(el)($scope); 

ような何か今、あなたは追加することができますこのようなもの

$('.paragraph').append(compiledElement) 

注射するのを忘れないでくださいこのロジックは

jsfiddle

var app=angular.module('myApp',[]) 
     .controller('myController',function($scope){ 
      $scope.clicked = false; 
      $scope.clickMe = function(){ 
       $scope.clicked = true; 
      }  
      $scope.closeMe = function(){ 
      alert("closed") 
      } 
     }) 

HTML場合に役立ちますあなたのコントローラ

Answer 2

チェックインサービス：

<section ng-app="myApp" ng-controller="myController" ng-init="init()"> 
<div class="paragraph"> 
<p> 
This is a sample. 
</p> 
<span ng-if="clicked"><i class="fa fa-times" aria-hidden="true" ng-click="closeMe()"></i></span> 
</div> 
<button ng-click="clickMe()">Add Close ICon</button> 
</section> 

Answer 3

をまたng-bind-html

$scope.clickMe = function(){ 
     $scope.htmlCode= $sce.trustAsHtml('<span ng-click="closeMe()"><i class="fa fa-times" aria-hidden="true"></i></span>'); 
} 

<p> 
    This is a sample. 
    <span ng-bind-html="htmlCode"> 
    </span> 
</p> 

を使用することができます

もコントローラに$sceを注入します。 Demo

Answer 4

しかし、それはベストプラクティスではありません。 要素が作成されるまでの範囲範囲ではなく、遅すぎるため、しばしば機能しません。

Angularには非常に特別なルールがあり、それは「明白」に保たれるように作られています。 もう1つの例は依存性注入です。つまり、異なるモジュール間で複数の依存関係を同じ名前で提供することはできません。これはあまりスマートではありません。メインモジュールがあれば、他のコントローラは彼から派生し、メインモジュールでコードをクリアしてください。

ソリューション：

1）があなたの近くに私のボタンを作成し、それを隠しておく、あなたのhtmlを追加した後、それを示しています。

2）もう1つの解決策は、関連情報を含むポップアップを作成することです。

var compile = $compile(appendedElement)($scope)