有一个div有一些id说mainDiv.然后有三个按钮.单击每个按钮会向mainDiv添加具有不同指令的不同角元素.
<div id="mainDiv"></div> <button ng-click="appendSomeElement1ToMainDiv()"></button> <button ng-click="appendSomeElement2ToMainDiv()"></button> <button ng-click="appendSomeElement3ToMainDiv()"></button>
如何在不使用控制器中的dom操作的情况下实现此目的.它太诱人了
$scope.appendSomeElement1ToMainDiv = function () {
var element1 = angular.element("<p>I am a new element</p>");
$("#mainDiv").append(element1);
};
解决方法
Directives正是您要找的.你可以这样做：
myApp.directive('mainArea',function() {
return {
restrict: "E",template: "<div>"+
"<div id='mainDiv'> </div>" +
"<button data-ng-click='append()'>Add</button>" +
"</div>",controller: function($scope,$element,$attrs) {
$scope.append = function() {
var p = angular.element("<p />");
p.text("Appended");
$element.find("div").append(p);
}
}
}
});
在你的HMTL中：
<main-area></main-area>
如果你的元素是一个指令,你应该看看$compile
