我想以编程方式添加一些支持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都可以是一个组件.
编辑：我希望这个简单的例子不会以这种方式结束,但无论如何.最终目标不是为数组中的每个元素显示一个div.
我真正想要的是一个更复杂的控制器.我需要一个有趣的行为的portlet容器.它可能需要决定将每个portlet放在不同的列.它可能会改变布局,并有一个体面的方式重组portlet在这种情况下.等等.
解决方法
虽然我不完全确定期望的结果是什么,但您确实想确保所有DOM操作都在指令内完成,而不是在控制器内部完成.
这个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",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));
}
}
};
});
