如何将 DOM 元素（带控制器）动态添加到 AngularJS 范围内答案

【问题标题】：How to add DOM element (with controller) into AngularJS scope dynamically如何将 DOM 元素（带控制器）动态添加到 AngularJS 范围内
【发布时间】：2014-02-05 20:58:57
【问题描述】：

我正在尝试构建一个应用程序（使用 AngularJS），它允许我将一个复杂的 HTML 元素拖动到一个 div 中，该元素可能包含从调色板中的角度控制器调用。

拖放部分正在工作，但是我无法将元素克隆到范围内。

我有一个 JSFiddle 在这里演示了这个问题：http://jsfiddle.net/gdharley/h4AcC/

基本上，当元素被删除时，我会发出一个由 mainController 拾取的事件。

$scope.$on('my-created', function (ev, val) {
    $scope.items.splice(val.to, 0, {
        name: val.name
    });
    var myInjector = angular.injector(["ng", "plunker"]);
    var $compile = myInjector.get("$compile"); // retrieve the compile service
    var fnLink = $compile(val); // returns a Link function used to bind element to the scope
    fnLink($scope);
})

然后我从注入器中检索编译服务并将他的元素编译到作用域中。

虽然没有引发错误，但元素的克隆不起作用（即添加联系人似乎不会调用控制器中的 add() 函数。

任何帮助表示赞赏。谢谢。格雷格

【问题讨论】：

标签： javascript jquery angularjs

【解决方案1】：

不，你不能用你的控制器把东西放到 DOM 中。您在指令中执行此操作。即使那样，您也不需要任何这些。只需让您的“add()”函数向您的模型添加内容并使用 ng-repeat 输出更多内容。

您所做的一切都应该以更改模型为基础。我很难准确理解您要实现的目标，但是拖放的结果应该会修改您的模型，并且角度可以根据手表或发射做出反应，但您不应该在大多数情况下手动编译任何东西.

如果你确实需要在你的指令中编译，而不是你的控制器。只需注入 $compile 服务并以这种方式调用它。

【讨论】：

感谢 Jonathan，虽然我提供的简单示例看起来您可以使用带有 ng-repeat 的模型，但实际用例不太适合该模式，因为我们不会放置控件（这里的例子是电子邮件列表）到一个简单的列表中。有布局考虑。尽管如此，我仍然非常感谢您关于注入 $compile 服务的提示，因为我一直在努力解决注入注释的工作方式，它与我之前使用过的任何其他语言都非常不同。
如果不是 ng-repeat，另一个自定义指令。你永远不想从控制器修改你的 DOM。对于熟悉 jQuery 的人来说，这是一个巨大的诱惑，但从长远来看，它会阻碍你。我不完全了解您要创建的内容的上下文，但我可以告诉您，有一种方法可以使其以模型为中心，并让自定义指令执行视觉效果。如果你能弄清楚这一点，从长远来看，你会更快乐。