ng-switch和手动$ compile

时间:2015-12-11 09:12:38

标签: angularjs

我试着像这里一样制作递归指令 Angularjs: understanding a recursive directive ng-switch选项都被注释,ng-if工作正常。 我不知道是什么问题。 只需检查ng-switch的输出

var module = angular.module('myapp', []);

module.controller("TreeCtrl", function($scope) {
    $scope.controls = [
   {
      "label":"Checkbox",
      "type":"checkbox"
   },
   {
      "label":"input",
      "type":"input"
   },
   {
      "label":"Some group",
      "type":"Group",
      "controls":[
         {
            "label":"subcontrol",
            "type":"input"
         }
      ]
   }
];
});

module.directive("tree", function($compile) {
    return {
        restrict: "E",    
        scope: {controls: '='},
        template:       
            '<div ng-switch="control.type">' +  
            '<label>{{control.label}}</label>'+
                '<div ng-switch-when="input"><input type="text" name="ctrl1"></input></div>'+
                 '<div ng-switch-when="checkbox"><input type="checkbox" "name="ctr2"></input></div>'+
                '<div ng-repeat="subcontrol in control.controls">' +           
                    '<tree control="subcontrol"></tree>' +
                '</div>' +
            '</div>',
        compile: function(tElement, tAttr, transclude) {
            //We are removing the contents/innerHTML from the element we are going to be applying the 
            //directive to and saving it to adding it below to the $compile call as the template
            var contents = tElement.contents().remove();
            var compiledContents;
            return function(scope, iElement, iAttr) {
                
                if(!compiledContents) {                    
                    compiledContents = $compile(contents, transclude);
                }
              
                compiledContents(scope, function(clone, scope) {               
                         iElement.append(clone); 
                });
            };
        }
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
  <div ng-controller="TreeCtrl">
    <div ng-repeat='control in controls'>
      <tree control="control"></tree>
    </div>
  </div>
</div>

0 个答案:

没有答案