javascript - 如何动态地将 DOM 元素(带有 Controller )添加到 AngularJS 范围中

Question

我正在尝试构建一个应用程序(使用 AngularJS)，它允许我拖动一个复杂的 HTML 元素，该元素可能包括从调色板到 div 的 Angular Controller 调用。

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

我有一个 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);
})

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

虽然没有抛出错误，但元素的克隆不起作用(即添加联系人似乎不会调用 Controller 中的 add() 函数。

感谢任何帮助。

Answer 1

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

您所做的一切都应该基于更改模型。我很难准确理解您想要实现的目标，但是拖放的结果应该修改您的模型，并且 Angular 可以根据 watch 或发射使用react，但大多数时候您不应该手动编译任何内容.

如果您确实需要编译，请在指令中进行编译，而不是在 Controller 中进行。只需注入(inject) $compile 服务并以这种方式调用它即可。