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

Question

component_list.tpl

<p 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>
    <p class="tab-content" id="PlugContent">
        <p 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>
                    <p class="boxes">
                        <p se-component></p>
                    </p>
                </li>
            </ul>
        </p>
    </p>
</p>

component.tpl

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

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 will create its own scope, and the sub-scope needs to
$parent.xxx
to access the controller’s $scope

It is recommended that your seComponent retrieves content by setting attributes

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

Answer 2

I found that if the replace:true of se-component is removed, the display will be normal, but there will be an extra label of <se-component>, which is not good-looking