Jquery ng单击“不使用动态生成的HTML”

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>

---

在这里，AngularJS的控制器部分调用的函数没有从ng click事件中获取触发器。Html已成功附加，但ng单击不起作用。告诉我使其工作的解决方案

要使

ng单击

工作，我们需要使用

$compile

服务编译此源代码。Angular应该知道新生成的HTML，因此该HTML应该包含在摘要循环中，以便触发

ng点击

和其他事件

看

创建“编译器”：

之后，创建模拟附加的虚拟

工厂

：

例如，您的示例应该是：

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

var divTemplate = '..your div template';
var temp = $compile(divTemplate)($scope); 

{{host.hostCd}
{{host.hostName}

---

顺便说一句，现在您可以在代码上使用相同的指令并编译任何动态HTML。

仍然不是一个完美的解决方案！！！-只是为了说明如何进行动态编译

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

app.controller（'AppController'，函数（$scope，$compile）{
变量$el=$（''）+
'' +
'' +
'' +
“创建”+
'' +
“）。附于（“#新交易”）；
$compile（$el）（$scope）；
$scope.create=function（）{
console.log（'clicked'）
}
})

演示：

---

不要使用controller进行dom操作-这必须借助指令来完成

我需要让Cordova在新窗口中打开动态链接，因此我的解决方案是在父元素上单击ng并查看event.target以查看单击的内容：

<p ng-bind-html="foo.barhtml" ng-click="generalClick($event)"></p>

然后

.controller（'FooCtrl'，函数（$scope）{
var html=''；
$scope.foo.barhtml=html.replace（/href/g，'data href'）；
$scope.generalClick=函数（事件）{
//让Cordova在浏览器窗口中打开链接
window.open（event.target.attributes['data-href'].value，'u system'）；
}
})

您需要在此处添加$compile服务，它将ng click等角度指令绑定到您的控制器范围。类似于：

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

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单击

改变

“创建”

到

“创建”

---

---

很好

您需要为angularjs编译新的dom元素才能工作。。。您是否在指令/控制器中执行此操作，您可以访问scope@ArunPJohny：我正在从控制器调用该函数。但是我应该把编译函数放在哪里？？在指令中？？我不知道确切的场景，但您可以使用

ng include

和模板执行类似的操作。我应该实现从指令中附加html，而不是通过jquery执行吗？正如我在示例中所示，使用服务和外接程序控制器

$scope.newTransaction=tempService（）

@KiranKumar添加了Fiddle以允许您循环它的工作方式只是分享我的案例，我使用Handlebar为表加载模板，因为当数据变得更重时，ng repeat很慢。我使用

$compile（handleCompiledContent）（范围）应用@Maxim Shoustin解决方案ng单击的把手中的
this
将不起作用。它引用的是handlebar中的object/array变量。如果我可以使用给定的compile data指令预定义div，因为服务创建了它，该怎么办？也无法在服务内通过$scope进行编译。。。我会用compiledata指令插入div，但谁会首先编译它来识别该指令。。。我也遇到了同样的问题？我已经尝试过这个方法，但不知道$compile。。。所以我试过了jquery@MaximShoustin：Y我们不应该从控制器使用DOM操纵吗？？有什么原因吗？@KiranKumar可用性、代码清晰性、维护。控制器应该关注业务逻辑，而不是接口操作。如果通过服务添加HTML而$scope不可用，如何实现同样的功能？@trainoasis您可以尝试使用父元素scope，如
$（'#newTransaction'）.scope（）
ie
$compile（$（'#newTransaction'）.scope（）我们可以在没有范围的情况下执行此操作吗。。我在工厂创建弹出窗口时声明了弹出窗口模板。如何发送参数init？@Sana angular.element（this.scope（）.init（1，'false'）；所以simpleI使用这个，但它说视频没有定义。任何想法返回“”；无法将ng repeat iterating item作为参数传递给函数。如果出于某种原因在服务中添加HTML，则此项将不起作用。
<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');
    }
})

var divTemplate = '..your div template';
var temp = $compile(divTemplate)($scope); 

angular.element(document.getElementById('foo')).append(temp);

var div = angular.element("divID");
div.bind('click', $scope.addPhoto());