Question

我在AngularJS表达式中显示HTML。

在我的HTML中

<div ng-bind-html="myText"></div>

并在我的控制器中

$scope.myText = $sce.trustAsHtml("<div class='my-style' ng-click='onClick(10)'>click me</div>");

$scope.onClick = function(value)
{
    console.log("onClick: value:"+value);
}

但我无法获得点击事件

更新

在其中一个question中，我看到它已经描述了如何在文本中添加HTML标记或如何编译HTML。但我的问题与如何从编译HTML中获取ng-click事件有关。我没有看到提供此解决方案的任何答案。

Answer 1

很抱歉再次编写代码：首先给你的div一个唯一的id：

        <div id="test"></div>

然后将该代码更改为以下代码：

   var myText = "<div class='my-style' ng-click='onClick(10)'>click me</div>";

    var element = angular.element(document.querySelector('#test'));
    var generated = element.html(myText);
    $compile(generated.contents())($scope);

这将管理您的代码。干杯！

Answer 2

使用指令实现此功能。在这里查看演示http://plnkr.co/edit/tTgVCMt7JqvaQOrjhLLL?p=preview

JS：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.testClick = function(value) {
      alert("onClick: value:"+value);
  };
});

app.directive("clickDynamic", function(){
   return {
       template:"<div class='my-style' ng-click='testClick(10)'>click me</div>"
   };
});

HTML：

<body ng-controller="MainCtrl">
   <div click-dynamic></div>
</body>

Answer 3

I have append the html using id or class                 
var add = angular.element( document.querySelector( '#updatechoose' ) );
                 add.append('<div class="form-group" ng-repeat="updatedata in getdata">'+
                                '<div>'+  
                                '<input type="file" id="imgupload" ng-model="attachment" imgepath="{{updatedata.imagepath}}" imgname="{{updatedata.imagename}}" name="file[]"  style="padding-left: 15px;" class="imgupload col-md-4 cropit-image-input" />'+
                                '<i class="glyphicon glyphicon-trash" **ng-click="remove()"**></i>'+
                                '</div>'+   
                            '</div>');

Answer 4

一种解决方案是使用普通javascript 并获取范围。这样你就可以调用你的内部方法。

<div ng-bind-html="myText"></div>
$scope.myText = $sce.trustAsHtml( '<div class="button" onClick="var scope = angular.element(this).scope();scope.testClick(10);">click me</div>' );

请注意，我使用 onClick 而不是ng-click，然后我获得了范围，这样我就可以调用内部方法了。
这是一个肮脏的解决方案，但也许它可以帮助你。

Answer 5

我添加了一个代码段，它通过指令和$ compile服务显示实现。

angular.module('TestApp', [])
  .directive('compileDir', function($compile) {
    return {
      restrict: 'E',
      scope: {
        dynTpl: '='
      },
      template: 'Num clicked: {{numClicked}}',
      link: function(scope, elem) {
        scope.numClicked = 0;
        scope.click = function() {
          scope.numClicked++;
        };

        var tpl = $compile(scope.dynTpl)(scope);
        elem.append(tpl);
      }
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.12/angular.min.js"></script>


<div ng-app="TestApp">
  <compile-dir dyn-tpl="'<button ng-click=\'click()\'>Click</button>'"></compile-dir>
</div>

AngulaJs ng-click in expression html

5 个答案: