1
動的テンプレートを追加し、ディレクティブ内でコンパイルしようとしています。しかし、私がディレクティブを使って動的に追加すると、私が持っているテンプレートのコンパイルされたバージョンは表示されません。何がうまくいかない。私はそれを捕らえることができない小さな誤りです。ここで要素ディレクティブを正しく使用できません
plunkerです：http://plnkr.co/edit/0BalxNnQYVxEd3mAjexx
UPDATE：アドオン（）関数内のディレクティブの文字列に変更
<!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