Question

我正在从angularjs控制器生成动态html元素。我使用了$ compile 使ng-click在html元素内起作用。但是仍然没有调用该函数。

这是我的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");
    }
   });
  }]);

我也注入了依赖项。有人可以说为什么即使我使用$ compile ng-click也不调用函数吗？

Answer 1

首先，您需要一个位于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");
};

Answer 2

可能您错过了使用angular.element(htmlString)来解析HTML字符串，然后对其进行了编译。

var app = angular.module('stackoverflow', []);

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="stackoverflow" ng-controller="MainCtrl">
  <div id="container"></div>
</div>

$ compile不触发Angularjs中的ng-click

2 个答案: