javascript 如何将支持 Angular 的元素添加到 DOM？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15842570/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add Angular-enabled elements to DOM?
提问by Konrad Garus
I would like to add some Angular-enabled DOM elements programmatically. Actually, I probably will need to add custom components. How can I do it?
我想以编程方式添加一些支持 Angular 的 DOM 元素。实际上，我可能需要添加自定义组件。我该怎么做？
Here's a trivial fiddle to demonstrate the issue: http://jsfiddle.net/ZJSz4/2/
这是一个简单的小提琴来演示这个问题：http: //jsfiddle.net/ZJSz4/2/
HTML:
HTML：
<div ng-app="main">
<div ng-controller="MyCtrl">
<button ng-click="add()" >Add</button>
<div id="container">
<div>{{test}}</div>
</div>
</div>
</div>
JS:
JS：
angular.module("main", []).controller("MyCtrl", function($scope) {
$scope.add = function() {
$("#container").append("<div>{{test}}</div>");
};
$scope.test = 'Test Message';
});
Just in case, I expect it to add a div showing "Test Message" for each click - not {{test}}.
以防万一，我希望它为每次点击添加一个显示“测试消息”的 div - 而不是 {{test}}。
Why do I need it? Well, I would like to have a few sortable columns (in jQuery sortable sense) with portlets. I imagine each portlet could be a component.
为什么我需要它？好吧，我想要一些带有 portlet 的可排序列（在 jQuery 可排序意义上）。我想每个 portlet 都可以是一个组件。
Am I climbing the wrong hill? What is the Angular way to solve this?
我爬错山了吗？解决这个问题的 Angular 方法是什么？
EDIT: I hoped this simplistic example wouldn't end that way, but anyway. The ultimate goal is not to display a div for each element in an array.
编辑：我希望这个简单的例子不会以这种方式结束，但无论如何。最终目标不是为数组中的每个元素显示一个 div。
What I really want is a more complex controller. I need a portlet container with some interesting behavior. It may need to decide to place each portlet in a different column. It may offer changing the layout and have a decent way to reorganize portlets in such event. And so on.
我真正想要的是一个更复杂的控制器。我需要一个具有一些有趣行为的 portlet 容器。它可能需要决定将每个 portlet 放在不同的列中。在这种情况下，它可能会提供更改布局并有一种体面的方式来重新组织 portlet。等等。
回答by Jonathan Palumbo
Although I am not entirely sure what the desired outcome is, you do want to be sure that all DOM manipulation is done within a directive and not inside your controller.
尽管我不完全确定所需的结果是什么，但您确实希望确保所有 DOM 操作都在指令内完成，而不是在您的控制器内完成。
This JSfiddle example should get you going in the right direction.
这个 JSfiddle 示例应该让你朝着正确的方向前进。
<div ng-app="main">
<div ng-controller="MyCtrl">
<div id="container">
<button ng-click="add()" >Add</button>
<ng-portlet></ng-portlet>
</div>
</div>
angular.module("main", []).controller("MyCtrl", function($scope) {
$scope.test = 'Test Message';
}).directive("ngPortlet", function ($compile) {
return {
template: '<div>{{test}}</div> ',
restrict: 'E',
link: function (scope, elm) {
scope.add = function(){
console.log(elm);
elm.after($compile('<ng-portlet></ng-portlet>')(scope));
}
}
};
});
回答by Christopher Marshall
If you want multiple tests, I'd suggest setting it up like so.
如果你想要多个测试，我建议你这样设置。
<div ng-app="main">
<div ng-controller="MyCtrl">
<button ng-click="add()" >Add</button>
<div id="container">
<div ng-repeat="test in tests">{{test.name}}</div>
</div>
</div>
</div>
$scope.tests = []; // define this as an array
$scope.add = function() {
var newTest = {name: 'Test Message'};
$scope.tests.push(newTest);
};
This will dynamically create divs based on your tests object.
这将根据您的测试对象动态创建 div。
回答by synergi
As @Christopher Marshall pointed out, the simplest way to do this is using a repeating element and pushing a new item into scope on the button press.
正如@Christopher Marshall 指出的那样，最简单的方法是使用重复元素并在按下按钮时将新项目推入范围。
[HTML]
[HTML]
<div ng-app="main">
<div ng-controller="MyCtrl">
<button ng-click="add()" >Add</button>
<div id="container">
<div ng-repeat="test in tests">{{test}}</div>
</div>
</div>
</div>
[JS]
[JS]
angular.module("main", []).controller("MyCtrl", function($scope) {
$scope.add = function() {
$scope.tests.push('New Message');
};
$scope.tests = ["Test Message","Test Message 2"];
});
