NG-點擊不從動態生成HTML工作

Question

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"); 
    }; 

這裏的F在AngularJS的控制器部分中調用的unction不會從ng-click事件觸發。 Html正在成功添加，但ng-click不起作用。告訴我解決方案使其工作

Answer 1

不完美的修復，仍然!!! - 只是爲了證明編譯動態如何能做到

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

不要使用控制器DOM操作 - 它必須與指令的幫助

Answer 2

要使ng-click工作，我們需要編譯此源使用$compile服務。 Angular應該知道新生成的HTML，因此，爲了觸發ng-click和其他事件，這個HTML應該包含在摘要循環中。

見Fiddle

創建 「compilator」：創建虛擬factory的，模擬追加

.directive('compileData', function ($compile) { 
    return { 
    scope: true, 
    link: function (scope, element, attrs) { 

     var elmnt; 

     attrs.$observe('template', function (myTemplate) { 
     if (angular.isDefined(myTemplate)) { 
      // compile the provided template against the current scope 
      elmnt = $compile(myTemplate)(scope); 

      element.html(""); // dummy "clear" 

      element.append(elmnt); 
     } 
     }); 
    } 
    }; 
}); 

後：

.factory('tempService', function() { 
    return function() { 
    return '<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>'; 
    }; 
}); 

最後調用它像：

<div compile-data template="{{mainPage}}"></div> 

在控制器

：

$scope.newTransaction= tempService(); 

對於你的榜樣應該是這樣的：

<table data-ng-table="tableParams" class="table table-bordered table-hover " style="border-collapse:collapse" data-ng-init="host.editSave = false" > 
    <tr compile-data template="{{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> 

BTW，現在你可以使用在你的代碼相同的指令和編譯任何動態HTML。

Answer 3

我做需要Cordova在新窗口中打開動態鏈接，因此我的解決方案是在父元素上單擊ng並查看事件。目標看什麼點擊：

<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'); 
    } 
}) 

Answer 4

你需要添加$這裏編譯服務，將結合角指令像NG單擊控制器scope.Something這樣的：

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()); 

Answer 5

可以使用angular.element(this).scope()不使用NG單擊

，改變

'<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>' 是好的