Question

我正在尝试使用置于.append内部的angular调用一个方法。
但是该方法未被调用。我可以在ng-click内使用.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")
  }
})

示例：https://jsfiddle.net/fjhbbnno/

Answer 1

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

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

现在你可以像

那样追加它

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

不要忘记在控制器中注入$compile服务

Answer 2

检查此逻辑是否有帮助

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：

<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）创建“关闭我”按钮并隐藏它，在添加html后显示它。

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

3）如果必须附加ng-click，请使用$ compile依赖项，它将使指令从附加的html中转移到范围：

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

是否可以在`.append`中使用`ng-click`

4 个答案: