无法正确使用元素指令 [英] Unable to use element directive correctly
本文介绍了无法正确使用元素指令的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试添加动态模板并在指令中编译它.但是当我使用该指令动态添加时，它不会显示我拥有的模板的编译版本.出了什么问题.这是一个我无法捕捉到的小错误.
这是 plunker:http://plnkr.co/edit/0BalxNnQYVxEd3mAjexx
更新:add() 函数中指令字符串的变化
<html ng-app="myApp"><头><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script><脚本>var app = angular.module('myApp', []);app.controller("fCtrl",function($scope,$compile){$scope.addertmpl = "test1";$scope.searchType=2;$scope.counter = 1;$scope.searchConditionsNumber = [ "等于","不等于","至少","最多","介于","在","不在"];$scope.searchConditionsString = ["等于","包含","不等于","在","不在"];$scope.searchOperator = ["AND","OR","BRACKET-OPEN","BRACKET-CLOSE"];$scope.searchOpts = [{可假，group:"项目信息",组可假，标头:新入"，非法值:空，name:"PR_NEW",显示:真实，类型:字符串"},{可假，group:"项目信息",组可假，标头:新进"，非法值:空，name:"PR_NEW",显示:真实，类型:字符串"},{可假，group:"项目信息",组可假，标头:新进"，非法值:空，name:"PR_NEW",显示:真实，类型:字符串"},{可假，group:"项目信息",组可假，标头:新入"，非法值:空，name:"PR_NEW",显示:真实，类型:字符串"}];$scope.add = function(){无功限制= 10;如果($scope.counter == 限制){alert("您已达到添加" + vc.counter + " 输入的限制");}别的 {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);警报(newdiv.innerHTML)；$scope.counter++;}};});app.directive('datanType', function ($compile) {返回 {限制:'E'，替换:真的，链接:函数(范围、元素、属性){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 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 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>"+"</选择>"+"<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=''>运算符</option>"+"</选择>"+"<br><br>"+</span>"var testTemplate2 = 'Test2
';var testTemplate3 = 'Test3
';var 模板 = '';开关(属性.内容){案例'测试1':模板 = testTemplate1;休息;案例'test2':模板 = testTemplate2;休息;案例'test3':模板 = testTemplate3;休息;}ele.html(模板);警报(ele.html())；$compile(ele.contents())(scope);}};});<meta charset="utf-8"><title>JS Bin</title><body ng-controller="fCtrl"><p>结果:</p><datan-type content="test1" counter="0"></datan-type><div id="dynamicInput" class="test"></div><button ng-click="add()">添加表单元素例如 - 错误区域</button>