角JS：将一颗指令到另一个指令动态 [英] Angular JS : Insert one directive into another directive dynamically
问题描述
首先，我这样做可能是不正确的方式。但我会解释这个问题：
First of all, the way i am doing may not be correct. But i will explain the problem:
1）我创建指令称为为＆lt; firstDirective>
1) I am creating directive called as < firstDirective >
2）时，在第一指令按钮的点击次数，那么我想在运行时动态插入第二个指令
2) when the clicks on a button in the first directive, then I am trying to insert the second directive dynamically at runtime
如下：
<!DOCTYPE html>
<html>
<script src="lib/angular/angular.js"></script>
<body ng-app="myApp">
<first-directive></first-directive>
<script>
var app = angular.module("myApp", []);
app.directive("firstDirective", function() {
return {
template : '<h1>This is first directive!</h1> <br / ><br / ><button type="button" ng-click="firstCtrl()">Click Me to second directive!</button> <div id="insertSecond"></div> ',
controller: function ($scope) {
$scope.firstCtrl = function($scope) {
angular.element(document.querySelector('#insertSecond')).append('<second-directive></second-directive>');
}
}
}
});
app.directive("secondDirective", function() {
return {
template : '<h1>This is second directive!</h1> <br / ><br / >',
controller: function ($scope) {
}
}
});
</body>
</html>
但它不工作，我的意思是，它被插入＆lt;第二-指令>＆LT; /第二指令>文本而不是内容按上面的指令
But it is not working, i mean, it is inserting the "< second-directive > < / second-directive >" text but not the content as per the directive above.
我是新来的角JS，我认为我们可以以不同的方式做到这一点还是我的做法本身是不正确的。但我想要动态插入第二个指令。
I am new to angular js, I think we can do this in a different way or my approach itself is not correct. But all i want to insert the second directive dynamically.
编辑：我得到了这个解决方案，这要归功于乔治·李：
: I got the solution for this, thanks to the George Lee:
解决方案是我们编译如下，但范围对象并没有传递给函数：
Solution is we have to compile as follows, but didn’t pass scope object to the function:
<!DOCTYPE html>
<html>
<script src="lib/angular/angular.js"></script>
<body ng-app="myApp">
<first-directive></first-directive>
<script>
var app = angular.module("myApp", []);
app.directive("firstDirective", function($compile) {
return {
templateUrl : '<h1>This is first directive!</h1> <br / ><br / ><button type="button" ng-click="firstCtrl()">Click Me to second directive!</button> <div id="insertSecond"></div> ',
controller: function ($scope) {
$scope.firstCtrl = function() {
var ele = $compile('<second-directive></second-directive>')($scope);
angular.element(document.querySelector('#insertSecond')).append(ele);
}
}
}
});
app.directive("firstDirective", function() {
return {
templateUrl : '<h1>This is second directive!</h1> <br / ><br / >',
controller: function ($scope) {
}
}
});
此外，这链接，提供了如何动态编译并注入了很好的解释模板。
Also, this link , gives very good explanation of how to dynamically compile and inject the templates.
推荐答案
您可以使用的 $编译 在角服务，确保您将其包含在依赖注入。
You can use the $compile service in Angular, make sure you include it in the dependency injection.
app.directive("firstDirective", ['$compile', function($compile) {
...
controller: function ($scope) {
$scope.firstCtrl = function() {
var ele = $compile('<second-directive></second-directive>')($scope);
angular.element(document.querySelector('#insertSecond')).append(ele);
}
}
这篇关于角JS：将一颗指令到另一个指令动态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
