如何从角度控制器插入指令到视图中？

我在我的角度模块中有一个自定义指令，我想动态地将其插入到我的视图中，同时包含控制器内部函数的不同信息的多个实例也在模块中..这是如何完成的？对于例子缘故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(){ 
     //???? 
    } 
}

来源

2014-10-03 alsco77

当你想到你的角度应用程序（和一般的，当你“想MVVM”），想象一下控制器改变应用程序的一些状态 - 这是在角视图模型或$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。

来源

2014-10-03 15:03:20

@AlexScott的视图，不确定为什么你没有将此标记为答案。 'ng-repeat'只是视图决定如何渲染的一种方式。它可以很容易地使用'ng-if =“values [N]！== undefined”'并且将指令洒在任何你想要的地方。 – 2014-10-06 15:48:56

是的，我不是故意的 - 道歉 – alsco77 2014-10-07 08:04:43

使用ng-if。即<div ng-if="myDirectiveActive"> <my-directive></my-directive> </div>。只要myDirectiveActive标志为真，它会将div与您的指令一起插入到DOM树中

来源

2014-10-03 13:53:44

即时通讯要添加多个这些指令包含从控制器加载的唯一数据。我真的不明白你的解决方案 – alsco77 2014-10-03 14:01:58

只要表达式服务于它，'ng-if'将包含元素的元素插入到DOM中。它几乎和'ng-show'一样，但不是隐藏元素，而是将其插入到DOM树中（如果表达式计算结果为false，则将其删除）。所以，如果你想插入你的指令到DOM中，只要把它放在一个'ng-if =“isMyDirectiveActive”'就可以了的元素中，然后只要把'$ scope.isMyDirectiveActive'改为true就可以了激活指令。在下一个渲染周期中，您的指令将被插入到DOM中并被激活。这更清楚吗？ – 2014-10-03 14:40:58

是的，我明白，但这并不能给我我想要的功能。我想从函数调用中添加这些指令，所以我不必明确说明在视图中将出现多少个指令。用你的方法，我需要在ng-if div中插入，这个指令是我计划放在那里的......但是我不知道我需要多少，他们需要动态插入 – alsco77 2014-10-03 14:57:48

-2

试试这个，使用$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; 
    }; 
});

来源

2014-10-03 14:07:55

为什么？这是错误的 - 不要修改控制器 – 2014-10-03 14:40:18

如何从角度控制器插入指令到视图中？

回答

相关问题