Question

我有2个指令，其中一个是递归的，另一个是带有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').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);
                    });
                }
            };
        }
    };
});

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

Answer 1

以防其他人遇到此问题，它与范围有关。在指令中使用scope我传递family的方式会创建一个隔离的范围。这意味着您必须使用属性传递其他变量。工作Plunker

scope: {
  family: '='
  ,links: '='
  ,types: '='
}

带有嵌套指令的指令，重复不呈现

1 个答案: