angularjs – 如何在不对控制器进行dom操作的情况下将一些角元素

发布时间：2020-12-17 17:48:03 所属栏目：安全来源：网络整理

导读：有一个div有一些id说mainDiv.然后有三个按钮.单击每个按钮会向mainDiv添加具有不同指令的不同角元素. div id="mainDiv"/divbutton ng-click="appendSomeElement1ToMainDiv()"/buttonbutton ng-click="appendSomeElement2ToMainDiv()"/buttonbutton ng-click=

有一个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>

Working Fiddle

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!