如何将支持Angular的元素添加到DOM？

问题描述：

我想以编程方式添加一些支持Angular的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显示“测试消息“每次点击 - 不{{测试}}。

为什么我需要它？那么，我想用portlet有几个可排序的列（用jQuery排序）。我想每个portlet都可能是一个组件。

我爬错了山吗？解决这个问题的方法是什么？

编辑：我希望这个简单的例子不会以这种方式结束，但无论如何。最终目标不是为数组中的每个元素显示div。

我真正想要的是一个更复杂的控制器。我需要一个有一些有趣行为的portlet容器。它可能需要决定将每个portlet放在不同的列中。它可能会改变布局，并且在这种情况下有一个体面的方式来重新组织portlet。等等。

你通过教程走在文档在线？你应该先做。你需要让你的模型驱动UI。如果你需要更多的“测试”，创建一个测试数组并添加/删除元素。该视图将自动更新。 – mpm 2013-04-05 20:09:43

答

如果你想多次测试，我建议像这样设置它。

<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。

我试过这个，但得到'推动不是一个函数'。 $ scope.tests应该被定义为一个数组，而不是一个对象。 '$ scope.tests = [];' – 2016-08-15 17:11:53

@TravisHeeter哈哈，很棒的编辑。我把你的编辑作为最初的编辑。我很抱歉。 – 2016-08-15 19:14:05

@TravisHeeter另外，1337噶玛。尼斯 – 2016-08-15 19:14:22

答

虽然我不完全确定所需的结果是什么，但您确实希望确保所有的DOM操作都在指令内完成，而不是在控制器内部完成。

这JSFiddle的例子应该让你朝着正确的方向前进。

http://jsfiddle.net/ZJSz4/5/

<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)); 
     } 
    } 
}; 
});

答

由于@Christopher马歇尔指出，要做到这一点最简单的方法是使用重复元素，推动新项范围上的按钮按下。

[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"]; 
});

如何将支持Angular的元素添加到DOM？

相关推荐