AngularJS нг-щелчок не срабатывает

Question

Я сгенерировать в тег динамически из файла JSON и добавить их, как это на страницу:

for(var i = 0; i < currentScene.hotpoints.hotpoint.length; i++) 
{ 
    var hotpoint = currentScene.hotpoints.hotpoint[i]; 

    var pos = hotpoint.pos.split(";"); 

    var x = parseFloat(pos[0]) * multiplierX; 
    var y = parseFloat(pos[1]) * multiplierY; 


    htmlstring += '<a href ng-controller="main" id="hp'+ hotpoint.ID + '" class="hotpoint animated infinite" style="top: ' + parseInt(y) + 'px; left: ' + parseInt(x) + 'px;" ng-click="enterScene(' +hotpoint.sceneID + ',' + hotpoint.ID +')"></a>'; 

} 
$scope.hotpoints = $sce.trustAsHtml(htmlstring); 

Это прекрасно работает. Теперь, как вы видите, я хочу включить событие click для каждого элемента. Поэтому я использую ng-click. Но его не увольняют.

Когда я добавляю этот ng-click в «статический» элемент, который уже находится на сайте, все работает.

Что мне нужно, чтобы это работало?

Благодаря

Answer 1

Да ... $ компиляция должна быть использована для этого ..

(function(){ 
"use strict"; 
angular.module("CompileDirective", []) 
    .directive('dynamicElement', ['$compile', function ($compile) { 
     return { 
     restrict: 'E', 
     scope: { 
      message: "=" 
     }, 
     replace: true, 
     link: function(scope, element, attrs) { 
      var template = $compile(scope.message)(scope); 
      element.replaceWith(template);    
     }, 
     controller: ['$scope', function($scope) { 
      $scope.clickMe = function(){ 
       alert("hi") 
      }; 
     }] 
     } 
    }]) 
    .controller("DemoController", ["$scope", function($scope){ 
     $scope.htmlString = '<div><input type="button" ng-click="clickMe()" value="click me!"/> </div>'; 
    }]) 

}()); 

Со следующей HTML:

<div ng-controller="DemoController"> 
    <dynamic-element message='htmlString'></dynamic-element> 
</div> 

ИЛИ вы можете также пойти для инъекций $ декомпилировать в контроллере.

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

    var $el = $('<td contenteditable><input type="text" class="editBox" value=""/></td>' + 
     '<td contenteditable><input type="text" class="editBox" value=""/></td>' + 
     '<td>' + 
     '<span>' + 
     '<button id="createHost" class="btn btn-mini btn-success" data-ng-click="create()"><b>Create</b></button>' + 
     '</span>' + 
     '</td>').appendTo('#newTransaction'); 
    $compile($el)($scope); 

    $scope.create = function(){ 
     console.log('clicked') 
    } 
}) 

И самый простой способ.

$("#dynamicContent").html(
    $compile(
    "<button ng-click='count = count + 1' ng-init='count=0'>Increment</button><span>count: {{count}} </span>" 
)(scope) 
);