我在我的角度模块中有一个自定义指令，我想动态插入到我的视图中，其中包含来自模块中控制器内部函数的不同信息的多个实例。这是如何完成的？例如，here is a sample fiddle 用来向我展示这是如何完成的
var myApp = angular.module('myApp',[]);
myApp.directive('myDirective', function() {
return {
restrict: "E",
transclude: true,
template: "<div><h4>Hello, World!</h4></div>"
}
});
function MyCtrl($scope) {
$scope.insertDir = function(){
//????
}
}
【问题讨论】：
标签： javascript asp.net angularjs
使用ng-if。 IE。 <div ng-if="myDirectiveActive"> <my-directive></my-directive> </div>。只要myDirectiveActive 标志为真，它就会将带有您的指令的div 插入到DOM 树中
【讨论】：
ng-if 只要提供给它的表达式为真，就将包含元素插入到 DOM 中。它几乎就像ng-show，但不是仅仅隐藏元素，而是将它插入到 DOM 树中（如果表达式评估为 false，则将其删除）。因此，如果要将指令插入 DOM，只需将其放在带有 ng-if="isMyDirectiveActive" 的元素中，然后在需要激活指令时将 $scope.isMyDirectiveActive 更改为 true。在下一个渲染周期，你的指令将被插入到 DOM 中并被激活。这更清楚了吗？
当您考虑您的 Angular 应用程序时（通常是当您“在 MVVM 中思考”时），想象控制器改变了应用程序的某些状态 - 这是 Angular 中的 ViewModel 或 $scope - 并尽量不要思考设计控制器时视图特定的术语。
然后，当您构建视图时，请尝试让视图对应用的状态做出反应（即$scope）。
保持这种分离，你的生活会更轻松。
专门针对您的问题。创建将“驱动”您的视图的值（无论视图想要什么）。如果您的视图想要基于此值（或值数组）创建指令，那就这样吧。它可以这样做：
假设你的控制器设置$scope.values，像这样：
.controller("MyCtrl", function ($scope) {
$scope.name = 'Superhero';
$scope.values = ["AAA","BBB","CCC","DDD"];
})
那么您的视图可以执行以下操作：
Hello, {{name}}!
<my-directive ng-repeat="v in values">{{v}}</my-directive>
如果您想“添加指令”，请再次考虑将值添加到您的 $scope.values 中，而不是向视图添加指令。例如，您可以在控制器中响应用户点击的函数中执行此操作：
$scope.addNewValue = function(){
$scope.values.push("New Val: " + Math.random());
};
这是您更新后的fiddle。
【讨论】：
ng-repeat 只是 View 决定如何渲染的一种方式。它可以很容易地使用ng-if="values[N] !== undefined" 并将指令洒在任何你想要的地方。
试试这个，使用$compile 服务来编译具有给定范围的指令。
myApp.controller('MainCtrl', function($scope, $compile,$document) {
$scope.insertDir = function(){
var x = $compile('<my-directive></my-directive>')($scope);
document.getElementById("mydiv").innerHTML = x[0].innerHTML;
};
});
【讨论】：