$compile 在 angularjs 中未触发 ng-click

Question

我正在从 angularjs 生成动态 html 元素 controller.I 使用了 $compile 使 ng-click 在 html element.But 内部工作仍然没有调用该函数。

这是我的js

    var accountApp = angular.module('accountApp', ['ngRoute']);
    accountApp.config(['$compileProvider',function($compileProvider )
    .controller('myController',function($scope,$compile) 
    {
      var searchHTML = '<li><a href="javascript:void(0)" data-ng-
      click="setMarkerToCenterA()">'+item.title+'</a></li>';
      $compile(searchHTML)($scope);

      $scope.setMarkerToCenterA = function() {
      alert("this alert is not calling");
    }
   });
  }]);

我已经注入了依赖项also.Can有人告诉我为什么 ng-click 没有调用函数，即使我正在使用 $compile 吗？

Answer 1

可能你错过了使用 angular.element(htmlString) 解析 HTML 字符串，然后编译。

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

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

  var searchHTML = '<a href="#" data-ng-click="setMarkerToCenterA()">hello</a>';
  var template = angular.element(searchHTML);
  $compile(template)($scope);

  angular.element(document.querySelector('#container')).append(template);

  $scope.setMarkerToCenterA = function() {
    alert("this alert is now calling");
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>

<div  ng-app="Whosebug" ng-controller="MainCtrl">
  <div id="container"></div>
</div>

Answer 2

首先你需要一个 li 元素所在的元素。

<div ng-controller="myController">
    <ul id="list"></ul>
</div>

然后在你的控制器中：

var element = angular.element("#list");
element.html($compile(html)($scope));

$scope.setMarkerToCenterA = function() {
    alert("Here");
};

$compile 在 angularjs 中未触发 ng-click

$compile not triggering ng-click in angularjs

html

angularjs

angularjs-ng-click