동적 템플릿을 추가하고 지시문 내에서 컴파일하려고합니다. 그러나 지시문을 사용하여 동적으로 추가 할 경우 컴파일 된 버전의 템플릿이 표시되지 않습니다. 무슨 일 이니? 내가 잡을 수없는 작은 오류입니다. http://plnkr.co/edit/0BalxNnQYVxEd3mAjexx요소 지시문을 올바르게 사용할 수 없습니다.
UPDATE : 여기
는 plunker입니다 추가의 지시 캐릭터의 변화() 함수<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller("fCtrl",function($scope,$compile){
$scope.addertmpl = "test1";
$scope.searchType=2;
$scope.counter = 1;
$scope.searchConditionsNumber = [ "equals","does not equal","is at least","is at most","is between","is in","is not in"];
$scope.searchConditionsString = ["equals","contain","does not equal","is in","is not in"];
$scope.searchOperator = ["AND","OR","BRACKET-OPEN","BRACKET-CLOSE"];
$scope.searchOpts = [{
editable:false,
group:"Project Info",
groupseditable:false,
header:"NEW-IN",
illegalValue:null,
name:"PR_NEW",
showing:true,
type:"String"
},{
editable:false,
group:"Project Info",
groupseditable:false,
header:"NEW-IN",
illegalValue:null,
name:"PR_NEW",
showing:true,
type:"String"
},{
editable:false,
group:"Project Info",
groupseditable:false,
header:"NEW-IN",
illegalValue:null,
name:"PR_NEW",
showing:true,
type:"String"
},{
editable:false,
group:"Project Info",
groupseditable:false,
header:"NEW-IN",
illegalValue:null,
name:"PR_NEW",
showing:true,
type:"String"
}];
$scope.add = function(){
var limit = 10;
if ($scope.counter == limit) {
alert("You have reached the limit of adding " + vc.counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.id = "div-"+$scope.counter;
var elementToAdd = angular.element("<datan-type counter='{{counter}}' searchconditionsstring='searchConditionsString' searchconditionsnumber='searchConditionsNumber' searchoperator='searchOperator' searchtype='searchType' content='addertmpl' searchopts='searchOpts'></datan-type>");
$compile(elementToAdd[0])($scope);
newdiv.innerHTML = elementToAdd[0];
document.getElementById('dynamicInput').appendChild(newdiv);
console.log(elementToAdd);
alert(newdiv.innerHTML);
$scope.counter++;
}
};
});
app.directive('datanType', function ($compile) {
return {
restrict: 'E',
replace: true,
link: function (scope, ele, attrs) {
var testTemplate1 = "<span class='mdl-textfield mdl-js-textfield input-padding-left'>"+
"<select class='mdl-textfield__input mdl-select' id='f"+(attrs.counter)+"' name='f"+(attrs.counter)+"' type='select' ng-model='searchOpts.selectedSearch["+(attrs.counter)+"].f"+(attrs.counter)+"' ng-change='searchOptsOnSelect("+(attrs.counter)+")'>"+
"<option value='' selected>Criteria</option>"+
"<option ng-repeat='item in searchOpts track by $index' id='f"+(attrs.counter)+"-{{$index}}-{{item.type}}' value='{{item.name}}'>{{item.name}}</option>"+
"</select>"+
"<select class='mdl-textfield__input mdl-select' id='o0' name='o0' type='select' ng-if='searchType === 2' ng-model='searchOpts.selectedSearch[0].o0' ng-options='item for item in searchConditionsString'>"+
"<option value='' selected>Condition</option>"+
"</select>"+
"<select class='mdl-textfield__input mdl-select' id='o0' name='o0' type='select' ng-if='searchType === 3' ng-model='searchOpts.selectedSearch[0].o0' ng-options='item for item in searchConditionsNumber'>"+
"<option value='' selected>Condition</option>"+
"</select>"+
"<input class='mdl-textfield__input' id='v"+(attrs.counter)+"' name='v"+(attrs.counter)+"' type='text' ng-model='searchOpts.selectedSearch["+(attrs.counter)+"].v"+(attrs.counter)+"' placeholder='%Search Value'>"+
"<select class='mdl-textfield__input mdl-select' id='c"+(attrs.counter)+"' name='c"+(attrs.counter)+"' type='select' ng-model='searchOpts.selectedSearch["+(attrs.counter)+"].c"+(attrs.counter)+"' ng-options='item for item in searchOperator'>"+
"<option value=''>Operator</option>"+
"</select>"+
"<br><br>"+
"</span>"
var testTemplate2 = '<h1>Test2</h1>';
var testTemplate3 = '<h1>Test3</h1>';
var template = '';
switch(attrs.content){
case 'test1':
template = testTemplate1;
break;
case 'test2':
template = testTemplate2;
break;
case 'test3':
template = testTemplate3;
break;
}
ele.html(template);
alert(ele.html());
$compile(ele.contents())(scope);
}
};
});
</script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-controller="fCtrl">
<p>Result:</p>
<datan-type content="test1" counter="0"></datan-type>
<div id="dynamicInput" class="test"></div>
<button ng-click="add()">Add Form Elem Eg - Error Area</button>
</body>
</html>
여기서 실제로 무엇을하려고합니까? 문자열에서 각도 지시어를 렌더링 한 다음 문자열을 컴파일하려고 시도하는 것은 의미가 없습니다. 지시어는 DOM에 들어갈 때까지 바인딩 될 수 없지만 컴파일 할 때까지는이 방법으로 평가할 때가 너무 늦습니다. 각도 내에서 동적으로 콘텐츠를 추가하는 훨씬 쉬운 방법이 있습니다. – Claies
유스 케이스가있는 프로젝트에 있습니다. – Gary
@ Claies는 같은 논리에 대한 대안이 있습니까? – Gary