Jquery 是否可以在“”内使用“ng click”。追加`

我正在尝试使用angular调用一个方法，该方法位于

.append

的内部，但未调用该方法。我是否可以使用

ng单击
内部
.append
？否则是否有其他方法在angular中追加元素

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

var-app=angular
.module（'myApp'，[]）
.controller（'myController'，函数（$scope）{
$scope.clickMe=函数（）{
$（'段落'）。附加（''）；
}      
$scope.closeMe=函数（）{
警报（“关闭”）
}
})

示例：
首先，您必须进行动态编译，以将角度指令（如ng click）绑定到控制器范围，例如

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

不要忘记在控制器中插入
$compile
服务
检查此逻辑是否有用


HTML:



这是一个样本。

添加关闭图标
您也可以使用
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>

$scope.clickMe=function（）{
$scope.htmlCode=$sce.trustAsHtml（“”）；
}  

这是一个样本。


同时将
$sce
注入控制器
 是的，但这不是最佳做法。
通常情况下，在创建元素之前，该元素不在作用域范围内，因此无法正常工作。

Angular有一套非常特殊的规则，可以说是为了保持它的“清晰”。
另一个例子是依赖项注入，这意味着您不能在具有相同名称的不同模块之间提供多个依赖项，这也不是很聪明，因为如果您有一个主模块，其他控制器就是从他派生的，请在主模块中声明所有依赖项，并保持代码清晰

解决方案：

1）创建“关闭我”按钮并将其隐藏，在附加html后显示

2）另一个解决方案是创建一个包含相关信息的弹出窗口

3）如果必须附加ng单击，请使用$compile依赖项，该依赖项将使您的指令从附加的html中进入作用域：

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

您不应该从控制器修改DOM。将您的内容和相关逻辑放在视图中。使用动态编译和从控制器修改DOM对于OP尝试执行的操作来说是一个重大的过度操作。最好将ng sanitize dependency与$sce一起使用，因为某些html文本无法使用trustAsHtml进行清理。不久前有过这样的问题：）
<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>

$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>

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