[英]How to add Angular-enabled elements to DOM?
我想以编程方式添加一些支持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}}。
我为什么需要它? 好吧,我希望有一些可排序的列(在jQuery可排序的意义上)与portlet。 我想每个portlet都可以是一个组件。
我爬错了山吗? 什么是Angular解决这个问题的方法?
编辑 :我希望这个简单的例子不会以这种方式结束,但无论如何。 最终目标不是为数组中的每个元素显示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", []).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));
}
}
};
});
如果你想要多次测试,我建议你这样设置。
<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);
};
这将根据您的测试对象动态创建div。
正如@Christopher Marshall所指出的,最简单的方法是使用重复元素并在按下按钮时将新项目推入范围。
[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]
angular.module("main", []).controller("MyCtrl", function($scope) {
$scope.add = function() {
$scope.tests.push('New Message');
};
$scope.tests = ["Test Message","Test Message 2"];
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.