我想以编程方式添加一些支持 Angular 的 DOM 元素。实际上,我可能需要添加自定义组件。我该怎么做?
这是一个简单的小提琴来演示这个问题:http: //jsfiddle.net/ZJSz4/2/
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:
angular.module("main", []).controller("MyCtrl", function($scope) {
$scope.add = function() {
$("#container").append("<div>{{test}}</div>");
};
$scope.test = 'Test Message';
});
以防万一,我希望它为每次点击添加一个显示“测试消息”的 div - 而不是 {{test}}。
为什么我需要它?好吧,我想要一些带有portlet 的可排序列(在jQuery 可排序意义上)。我想每个 portlet 都可以是一个组件。
我爬错山了吗?解决这个问题的 Angular 方法是什么?
编辑:我希望这个简单的例子不会以这种方式结束,但无论如何。最终目标不是为数组中的每个元素显示一个 div。
我真正想要的是一个更复杂的控制器。我需要一个具有一些有趣行为的 portlet 容器。它可能需要决定将每个 portlet 放在不同的列中。在这种情况下,它可能会提供更改布局并有一种不错的方式来重新组织 portlet。等等。