AngularJS和生成的元素

时间:2012-06-01 20:44:33

标签: angularjs

我们有一些第三方javascript组件正在生成一些html元素。我想把它与AngularJS结合起来。

我试过这段代码

<div ng-controller="ExpensesCtrl">
    <form id="expensesform">
        <input type="text" ng-model="expense.name" />
        <input type="text" ng-model="expense.amount" />
    </form>
    <button ng-click="add()">Add</button>expense | json
</div>

function ExpensesCtrl($scope) {

    $scope.expense = {};
    $scope.add = function () {
        $("#expensesform").append("<input type='text' ng-model='expense.age' />");
    };
}

http://jsfiddle.net/tChNh/

但它不像例外。

有没有机会让这个工作?

2 个答案:

答案 0 :(得分:13)

这是错误的方法,但对于这种特殊情况,您需要执行以下操作:http://jsfiddle.net/wXZL7/1。注入$ compile服务。

同样,这不是使用Angular进行此操作的正确方法。 Angular的事情是'你不必在控制器中弄乱DOM,让HTML和指令这样做'。

您希望创建一个指令来包装生成元素的任何内容,然后执行此操作。阅读指令指南:http://docs.angularjs.org/guide/directive

答案 1 :(得分:0)

我找到了这个答案:Compiling dynamic HTML strings from database

也许它可以帮助别人。它描述了如何使用$compile服务让Angular了解知道代码。