渲染另一个指令内部指令（中继器模板内） [英] Render a directive inside another directive (within repeater template)
问题描述
我想呈现另一个指令（不知道在模板中的中继器工作这个）内的指令，它似乎只是作为文本输出，而不是在这里编译指令（plunker code：<一HREF =http://plnkr.co/edit/IRsNK9相对=nofollow> http://plnkr.co/edit/IRsNK9 ）
我如何能真正得到它正确地呈现我-DIR-之一的任何想法，我-DIR-二，我-DIR-三个转发器内的指令？
的index.html
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=plunker＆GT;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT;标题＆GT; AngularJS Plunker＆LT; /标题＆GT;
＆LT;链接rel =stylesheet属性HREF =style.css文件＆GT;
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =app.js＆GT;＆下; /脚本＆GT;
＆LT;脚本ID =谐音/ addressform.html类型=文/ NG-模板＆GT;
部分类型{{}型}＆LT的; BR＆GT;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV＆容器GT;＆LT; / DIV＆GT; ＆LT; BR /＆GT;＆LT; BR /＆GT;＆LT; BR /＆GT;
＆LT; B＆GT;下面就是测试指令是中继＆LT以外的实际可用; / B＆GT;
＆LT; DIV我-DIR-的One＆GT;＆LT; / DIV＆GT;
＆LT; DIV我-DIR二＆GT;＆LT; / DIV＆GT;
＆LT; DIV我-DIR三＆GT;＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
app.js
VAR应用= angular.module（'plunker'，[]）;app.directive（'容器'，函数（）{ 返回{
限制：'A'，
范围： {}，
更换：真实， 模板：'＆LT; DIV CLASS =意见＆GT;' +
'＆LT; DIV CLASS =查看NG重复=鉴于意见＆GT;' +
'＆LT;的div {{view.dir}}＆GT; {{view.dir}}＆LT; / DIV＆GT;' +
'＆LT; / DIV＆GT;' +
'＆LT; / DIV＆GT;， 链接：功能（范围，榆）{ scope.views = [
{DIR：我-DIR合一}，
{DIR：我-DIR-两个}，
{DIR：我-DIR-三个}
];
}
}
}）;app.directive（'myDirOne'，函数（）{
返回{
限制：'A'，
范围： {}，
更换：真实，
模板：'＆LT; DIV＆gt;这是指令吲; / DIV方式＆gt;
}
}）;app.directive（'myDirTwo'，函数（）{
返回{
限制：'A'，
范围： {}，
更换：真实，
模板：'＆LT; DIV＆gt;这是指示2路和LT; / DIV＆GT;'
}
}）;app.directive（'myDirThree'，函数（）{
返回{
限制：'A'，
范围： {}，
更换：真实，
模板：'＆LT; DIV＆gt;这是指令3＆LT; / DIV方式＆gt;
}
}）;
我设法重新写code，以解决此问题：
首先，我更新了模板code如下：
模板：'＆LT; DIV CLASS =意见＆GT;' +
'＆LT; DIV CLASS =视图 - 包装NG重复=鉴于意见＆GT;' +
'＆LT; DIV视图={{view.dir}}＆GT;＆LT; / DIV＆GT;' +
'＆LT; / DIV＆GT;' +
'＆LT; / DIV＆GT;，
注意我创建了一个新的视图指令。接下来view指令定义如下：
app.directive（'观点'，['$编译，函数（编译）{ 返回{
限制：'A'，
范围： {
观点：'@'
}，
更换：真实，
模板：'＆LT; DIV CLASS =查看＆GT;＆LT; / DIV＆GT;， 控制器：['$范围，功能（适用范围）{
范围。$表（视图，功能（价值）{
scope.buildView（值）;
}）;
}]， 链接：功能（范围，榆树，ATTRS）{ scope.buildView =功能（的viewName）{
VAR视图=编译（'＆LT; DIV'+的viewName +'＆GT;＆LT; / DIV＆GT;'）（范围）;
elm.append（视图）;
}
}
}
}]）;
所以基本上，该view.dir变量为查看指令，然后看着它的价值并编译该指令的模板在它的一个属性过去了。
I am trying to render a directive inside another directive (not sure if the repeater inside the template is working this), and it seems to just output as text rather than compiling the directive (plunker code here: http://plnkr.co/edit/IRsNK9)
Any ideas on how I can actually get it to render properly my-dir-one, my-dir-two, my-dir-three directives inside the repeater?
index.html
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
<script src="app.js"></script>
<script id="partials/addressform.html" type="text/ng-template">
partial of type {{type}}<br>
</script>
</head>
<body>
<div container></div>
<br /><br /><br />
<b>Below is just to test the directives are actually usable outside the repeater</b>
<div my-dir-one></div>
<div my-dir-two></div>
<div my-dir-three></div>
</body>
</html>
app.js
var app = angular.module('plunker', []);
app.directive('container', function () {
return {
restrict: 'A',
scope: {},
replace: true,
template: '<div class="views">' +
' <div class="view" ng-repeat="view in views">' +
' <div {{view.dir}}>{{view.dir}}</div>' +
' </div>' +
'</div>',
link: function (scope, elm) {
scope.views = [
{ dir: 'my-dir-one' },
{ dir: 'my-dir-two' },
{ dir: 'my-dir-three' }
];
}
}
});
app.directive('myDirOne', function () {
return {
restrict: 'A',
scope: {},
replace: true,
template: '<div>This is directive one.</div>'
}
});
app.directive('myDirTwo', function () {
return {
restrict: 'A',
scope: {},
replace: true,
template: '<div>This is directive two.</div>'
}
});
app.directive('myDirThree', function () {
return {
restrict: 'A',
scope: {},
replace: true,
template: '<div>This is directive three.</div>'
}
});
I managed to work around this issue by re-writing the code:
First I updated the template code as follows:
template: '<div class="views">' +
' <div class="view-wrapper" ng-repeat="view in views">' +
' <div view="{{view.dir}}"></div>' +
' </div>' +
'</div>',
Note that I created a new 'view' directive. Next the view directive definition as follows:
app.directive('view', ['$compile', function (compile) {
return {
restrict: 'A',
scope: {
view: '@'
},
replace: true,
template: '<div class="view"></div>',
controller: ['$scope', function (scope) {
scope.$watch('view', function (value) {
scope.buildView(value);
});
}],
link: function (scope, elm, attrs) {
scope.buildView = function (viewName) {
var view = compile('<div ' + viewName + '></div>')(scope);
elm.append(view);
}
}
}
}]);
So essentially, the view.dir variable is passed as an attribute to the 'view' directive, which then watches it's value and compiles a template with the directive in it.
这篇关于渲染另一个指令内部指令（中继器模板内）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
