angularjs - 如何将一些 Angular 元素附加到 div 而不在 Controller 中进行 dom 操作？

Question

有一个带有一些 id 的 div 说 mainDiv。然后是三个按钮。单击每个按钮会将具有不同指令的不同 Angular 元素附加到 mainDiv。

<div id="mainDiv"></div>
<button ng-click="appendSomeElement1ToMainDiv()"></button>
<button ng-click="appendSomeElement2ToMainDiv()"></button>
<button ng-click="appendSomeElement3ToMainDiv()"></button>

如何在不使用 Controller 中的 dom 操作的情况下实现这一点。它太诱人了

$scope.appendSomeElement1ToMainDiv = function () {
  var element1 = angular.element("<p>I am a new element</p>");
  $("#mainDiv").append(element1);
};

Answer 1

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>

Working Fiddle

如果你的元素是一个指令，你应该看看 $compile