new - on click jquery
ng-click не работает из динамически генерируемого HTML (4)
Мне нужно было, чтобы Cordova открыла динамическую ссылку в новом окне, поэтому мое решение состояло в том, чтобы поместить ng-click на родительский элемент и посмотреть на event.target, чтобы увидеть, на что было нажато:
<p ng-bind-html="foo.barhtml" ng-click="generalClick($event)"></p>
тогда
.controller('FooCtrl', function ($scope) {
var html = '<a href="http://www.google.com">google.com</a>';
$scope.foo.barhtml = html.replace(/href/g, 'data-href');
$scope.generalClick = function(event){
// have Cordova open the link in a browser window
window.open(event.target.attributes['data-href'].value, '_system');
}
})
HTML
<table data-ng-table="tableParams" class="table table-bordered table-hover " style="border-collapse:collapse" data-ng-init="host.editSave = false" >
<tr id="newTransaction">
</tr>
<tr data-ng-repeat="host in hosts|filter:search:strict" >
<td class="hostTableCols" data-ng-hide="host.editSave">{{host.hostCd}}</td>
<td class="hostTableCols" data-ng-hide="host.editSave">{{host.hostName}}</td>
</tr>
</table>
Jquery
$('#newTransaction').append(
'<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>'
);
Угловой скрипт
$scope.create = function() {
alert("Hi");
};
Здесь функция, вызываемая в части контроллера AngularJS, не получает триггер от события ng-click. Html успешно добавляется, но ng-click не работает. Скажите мне решения, чтобы заставить его работать
Не идеальное решение, все же !!! - просто показать, как можно сделать динамическую компиляцию
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')
}
})
Демо: Fiddle
Не используйте контроллер для манипуляции с домом - это нужно делать с помощью директив
вам нужно добавить здесь компиляцию $ compile, которая привяжет угловые директивы, такие как ng-click к вашей области управления. Что-то вроде:
var divTemplate = '..your div template';
var temp = $compile(divTemplate)($scope);
Затем добавьте его в HTML:
angular.element(document.getElementById('foo')).append(temp);
Вы также можете привязать событие к div следующим образом:
var div = angular.element("divID");
div.bind('click', $scope.addPhoto());
вы можете использовать angular.element(this).scope()
без использования ng-click
и изменение
'<button id="createHost" class="btn btn-mini btn-success" data-ng-click="create()"><b>Create</b></button>'
к
'<button id="createHost" class="btn btn-mini btn-success" onclick="angular.element(this).scope().create()"><b>Create</b></button>'
хорошо»