Angular 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) 我正在创建名为 < 的指令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>
但它不起作用，我的意思是，它插入了< second-directive > </second-directive >"文本，而不是按照上面的指令插入内容.
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.
我是 angular 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.
: 感谢 George Lee，我得到了解决方案:
: 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) {
}
}
});
此外，这个 link 很好地解释了如何动态编译和注入模板.
Also, this link , gives very good explanation of how to dynamically compile and inject the templates.
推荐答案
您可以使用 $compile Angular 服务，请确保将其包含在依赖注入中.
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);
}
}
这篇关于Angular JS:将一个指令动态插入到另一个指令中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
