Question

我正在尝试添加动态模板并在指令中编译它。但是当我使用该指令动态添加时，它并没有显示我所拥有的模板的编译版本。出了什么问题。这是一个我无法捕捉的小错误。

以下是plunker：http://plnkr.co/edit/0BalxNnQYVxEd3mAjexx

更新：add（）函数

中指令字符串的更改

<!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>

Answer 1

限制Element (E)和Attribute (A)

＆＃13;

$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("<tmpl-adder  counter='{{counter}}' searchconditionsstring='searchConditionsString' searchconditionsnumber='searchConditionsNumber' searchoperator='searchOperator' searchtype='searchType' content='addertmpl' searchopts='searchOpts'></tmpl-adder>");
            $compile(elementToAdd[0])($scope);
            newdiv.innerHTML = elementToAdd[0].outerHTML;
            console.log("elementToAdd[0]", elementToAdd)
            document.getElementById('dynamicInput').appendChild(newdiv);
            alert(newdiv.innerHTML);
            $scope.counter++;
        }
    };


app.directive('datanType', function ($compile) {
  return { 
    restrict: 'EA',
    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);  
      
    }
  };
});

＆＃13;

<div datan-type content="test1" counter="0"></div>

＆＃13;

这在我的plunkr上工作正常

无法正确使用元素指令

1 个答案: