使用 jquery 将 angularjs 指令动态添加到 DOM 元素

Question

我有一个页面，其中 html 元素将从服务器动态生成。我想根据使用 jquery 的某些条件将 ng-model 指令添加到文本框。例如：

$(document).ready(function(){
if(current page is 'something') //dont bother about the condition!
  $('input[title="test"]').attr('ng-model','name');
});

这样我就可以使用 ng-bind 绑定页面中此文本框的值。我该如何实现？

Answer 1

这是个坏主意。您的代码是 document.ready 中的运行，angular 对此一无所知，然后您将元素添加到 DOM 并且不告诉 angular，因此，它不会起作用。

您需要以不同的方式思考问题 - angular 有一个专门用于在不同页面上显示不同视图（或元素）的路由器，因此您不应该使用以下内容：

if(current page is 'something')

此外，如果您在 angular 上阅读的内容很少，系统会不断提醒您 指令操纵 DOM，并且您在几乎所有其他情况下，都应该避免在其他地方这样做。

我强烈建议您在继续之前阅读更多关于 angular 的内容，以深入了解它的工作原理，尤其是与 jQuery 相关的内容（您真的、真的不如果您有 angular)，则不需要 jQuery。

浅读：This Whosebug question
深度学习：Follow this course

这很糟糕，但在你继续之前你必须学习更多，否则你最终会变得沮丧并创建一个只是 'wrong' 的应用程序...

使用 jquery 将 angularjs 指令动态添加到 DOM 元素

Dynamically add angularjs directive to DOM elements using jquery

jquery

angularjs

angularjs-directive