Angularjs 指令与嵌套指令和重复不渲染

我有两个指令，其中一个是递归的，另一个是使用select选项呈现表单。一切看起来都正常，但ui中的选择框为空，但角度注释位于检查内部。我试图以多种方式编译结果，但无法显示选项。选择是重复的，我认为这就是原因。这是我的2条指令。谢谢你的帮助

选择选项

angular.module('myApp').directive("typesControl",function($compile,$timeout){
    return {
        replace: true
        //THESE OPTIONS DO NOT SHOW UP IN THIS SELECT
        ,template: '<select name="name" class="form-control"><option ng-repeat="type in design.types" ng-selected="{{type.id == content.partid}}">{{type.name}}</option></select>' 
        ,compile: function (element, link) {
            var contents = element.contents().remove();
            var compiledContents;
            return {
                pre: function (scope, element) {

                }
                ,post: function (scope, element) {
                    if (!compiledContents) {
                        compiledContents = $compile(contents);
                    }
                    compiledContents(scope, function (clone) {
                        element.append(clone);
                    });
                    element.change(function () {
                        var val = $(this).find('option:selected').val();
                        var $form = $(this).closest('form');
                        var $row = $(this).closest('.row');
                        var $container = $form.find('.formtemplate');
                        var tpl = '';
                        //THESE INPUTS DO RENDER
                        tpl += '<div><input type="text" name="ids" placeholder="ids" class="form-control" value="{{content.ids}}"></div>';
                        tpl += '<div><input type="text" name="classes" placeholder="classes" class="form-control" value="{{content.classes}}"></div>';
                        switch (val) {
                            case 'Partial':
                                tpl += '<select name="content" class="form-control"><option ng-repeat="link in links" ng-selected="{{link.url == content.content}}">{{link.url}}</option></select>';
                                break;
                            case 'View':
                                break;
                            case 'Source':
                                break;
                        }
                         element.removeAttr('types-control');
                         $container.empty().append(tpl);
                         $compile($container)(scope);
                         if (!scope.$$phase) {
                            scope.$apply();
                         }
                    });
                    $timeout(function () {
                        element.trigger('change');
                    });
                }
            };
        }
    }
});

angular.module（'myApp'）。指令（“typesControl”，函数（$compile，$timeout）{
返回{
替换：正确
//这些选项不会显示在此选择框中
，模板：“{type.name}”
，编译：函数（元素，链接）{
var contents=element.contents（）.remove（）；
var编译内容；
返回{
前置：功能（范围、要素）{
}
，职务：职能（范围、要素）{
如果（！compiledContents）{
compiledContents=$compile（目录）；
}
compiledContents（范围、功能（克隆）{
元素。追加（克隆）；
});
元素。更改（函数（）{
var val=$（this.find（'option:selected'）.val（）；
var$form=$（this）.closest（'form'）；
var$row=$（this）.closest（'.row'）；
var$container=$form.find（'.formtemplate'）；
var tpl=“”；
//这些输入确实会渲染
第三方物流+=”；
第三方物流+=”；
开关（val）{
“部分”情况：
tpl+='{{link.url}}'；
打破
案例“视图”：
打破
案例“来源”：
打破
}
元素removeAttr（'types-control'）；
$container.empty（）.append（tpl）；
$compile（$container）（范围）；
如果（！范围$$阶段）{
作用域：$apply（）；
}
});
$timeout（函数（）{
元素。触发器（“更改”）；
});
}
};
}
}
});

递归指令

angular.module('myApp').directive("tree", function($compile,$timeout) {
    return {
        scope: {family: '='}
        ,template:
            '<div class="row" ng-repeat="content in family | orderObjectBy:\'orderby\':false" style="margin-top: 25px;">'+
                '<div class="col-lg-6">'+
                    '<form class="simple-form">'+
                        '<div types-control ></div>'+
                        '<div class="formtemplate"></div>'+
                        '<button ng-click="newcontent(content.id)" type="submit" class="btn btn-success glyphicon glyphicon-plus"></button>'+
                        '<button ng-click="deletecontent(content.id)" type="submit" class="btn btn-danger glyphicon glyphicon-minus"></button>'+
                    '</form>'+
                '</div>'+
                '<div tree family="content.children"></div>'+
            '</div>'
        ,compile: function(element, link){
            var contents = element.contents().remove();
            var compiledContents;
            return {
                pre: function(scope, element){

                }
                ,post: function(scope, element){
                    if(!compiledContents){
                        compiledContents = $compile(contents);
                    }
                    compiledContents(scope, function(clone){
                        element.append(clone);
                    });
                }
            };
        }
    };
});

angular.module（'myApp'）。指令（“树”，函数（$compile，$timeout）{
返回{
作用域：{family:'='}
，模板：
''+
''+
''+
''+
''+
''+
''+
''+
''+
''+
''
，编译：函数（元素，链接）{
var contents=element.contents（）.remove（）；
var编译内容；
返回{
前置：功能（范围、要素）{
}
，职务：职能（范围、要素）{
如果（！compiledContents）{
compiledContents=$compile（目录）；
}
compiledContents（范围、功能（克隆）{
元素。追加（克隆）；
});
}
};
}
};
});

---

编辑：我创建了这个，它显示了选择框的问题。

为了防止其他人遇到这个问题，它与范围有关。在指令中使用

scope

，我传递

family

的方式会创建一个隔离的作用域。这意味着您必须在使用属性时传递其他变量。工作

---

我可以知道您需要

终端的原因吗？我没有收到任何错误，我正在做一些测试，我只是忘了删除终端。我已编辑我的问题以删除终端。谢谢你的回复。
scope: {
  family: '='
  ,links: '='
  ,types: '='
}