$ compile не вызывает ng-click в angularjs - PullRequest
Новая
       18

$ compile не вызывает ng-click в angularjs

0 голосов
/ 12 декабря 2018

Я генерирую динамический html-элемент из контроллера angularjs. Я использовал $ 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");
    }
   });
  }]);

Я также ввел зависимости. Кто-нибудь может сказать, почему ng-click не вызывает функцию, даже если я использую $ compile?

Ответы [ 2 ]

0 голосов
/ 12 декабря 2018

Сначала вам нужен элемент, где будет расположен этот элемент 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");
};
0 голосов
/ 12 декабря 2018

Возможно, вы пропустили синтаксический анализ строки HTML, используя angular.element(htmlString), который затем компилируется. 

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