angularjs的ng-repeat指令内如果嵌套自定义指令，内容渲染错误，

Question

component_list.tpl

<div class="component-list">
    <ul class="nav nav-tabs" id="PlugTabs" role="tablist">
        <li role="presentation" ng-repeat="component_type in component_list" 
            ng-class="{active:$first}">
            <a href="#{{component_type.id}}" role="tab" data-toggle="tab" 
                aria-controls="{{component_type.id}}" aria-expanded="true" 
                ng-bind="component_type.name"></a>
        </li>
    </ul>
    <div class="tab-content" id="PlugContent">
        <div role="tabpanel" class="tab-pane fade active in" 
            ng-repeat="component_type in component_list" 
            ng-class="{active:$first,in:$first}" 
            id="{{component_type.id}}">
            <ul class="list-group">
                <li class="list-group-item" ng-repeat="component_group in component_type.list">
                    <a href="#" class="list-group-header" ng-bind="component_group.name"></a>
                    <div class="boxes">
                        <div se-component></div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

component.tpl

<div class="box" ng-repeat="component in component_group.list" 
    controller="{{component.controller}}" draggable="true">
    <img src="{{component.image}}">
    <label ng-bind="component.name"></label>
</div>

directive

// se-component-list
Base.directive('seComponentList', function() {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: STATIC_PATH + 'js/seditor/tpls/base.component_list.tpl',
        controller: ['$scope', 'InitBaseData', function($scope, InitBaseData) {
            InitBaseData.getComponentList().success(function(data) {
                if (data && data.code == 0) {
                    $scope.component_list = data.component_list;
                } else {
                    alert('网络异常，请稍后重试');
                }
            }).error(function(err) {
                alert('网络异常，请稍后重试');
            });
        }]
    };
});
// se-component
Base.directive('seComponent', function() {
    return {
        restrict: 'A',
        replace: true,
        templateUrl: STATIC_PATH + 'js/seditor/tpls/base.component.tpl',
        link: function(scope, element, attr) {
            element.bind('drop', function(event) {
                event.preventDefault();
                console.log('drop');
            });
        }
    }
});

问题描述，如果把component.tpl的内容直接替换<se-component></se-component>，输出是正常的，但是我需要为component添加拖拽事件。目前的问题是，本来应该显示在其他boxes里面的内容都集中显示在最后一个boxes里面了，小弟刚学angular没多久，问题可能比较肤浅，但却是搜不到答案，还请讲解下，谢谢。

Answer 1

ng-repeat 是会创建自己的作用域的，子作用于访问 controller 的 $scope 需要
$parent.xxx
才行

建议你的seComponent 通过设置属性的方式来取内容

<div se-component list="component_type.list"></div>
//具体是不是这样写忘了...，需要验证下，就是这个意思

Answer 2

发现把se-component的replace:true去掉，显示就正常了，但是会多了个<se-component>的标签，不好看