如何使用 jQuery append 使用 AngularJS 指令？答案

【问题标题】：how to use AngularJS directive using jQuery append?如何使用 jQuery append 使用 AngularJS 指令？
【发布时间】：2014-04-03 07:06:17
【问题描述】：

我有很多用 jQuery 编写的代码。现在我想要一个方法，几千行jQuery代码写的，所以我觉得最好用AngularJS来实现新功能。基本上我需要的是：

我在 app.js 中有以下代码：

var cmsApp = angular.module('cmsApp', []);
cmsApp.controller('OOJRecordTab',['$scope' ,function($scope, $compile) {
  $scope.test = function() {
    console.log('Test');
  };
}]);

HTML：

<ul>
    <li class="dropdown open">
        <a>Records <span>0</span></a>
        <ul id="oojRecordsLinks" class="dropdown-menu">
            <li>
                <a ng-click="test()" tabindex="-1">test</a>
            </li>
        </ul>
    </li>
</ul>

上述点击功能完美运行。现在我在 jQuery 中有一个函数，例如：

function addNewRecords(html){
    $record = "<a ng-click='test()'></a>";
    $("ul#oojRecordsLinks").append($record);
}

这个新添加的行的点击功能不起作用。请建议。请有人帮助我。到现在还不行。

【问题讨论】：

你能把你的一些代码贴在这里吗？？
显示你的 html 你想在哪里使用这个功能
感谢您的帮助。问题已修改，见上文..
最好创建一个指令来实现这一目标
你能给我举个例子吗.. 我应该如何做到这一点，我已经尝试过，但它也不起作用？ app.js 中的代码` cmsApp.directive('myLink', function() { function link(scope, element, attrs) { element.on('click', function() { console.log('Its clicked'); }); } return { 限制：'A'，链接：链接 }; }); ` 在 jQuery 中： ` function addNewRecords(html){ $record = ""; $("ul#oojRecordsLinks").append($record); } `

标签： jquery angularjs

【解决方案1】：

最后我自己找到了答案。我们可以使用 jQUery 添加新添加的 html 元素，但是我们需要在使用 AngularjS 的作用域下编译它。经过几个小时的工作，我终于做到了.. 这是Plnkr Link。

谢谢大家.. :)

【讨论】：