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');
            });
        }
    }
});

Problem description: If I directly replace the content of component.tpl with <se-component></se-component>, the output is normal, but I need to add a drag event for the component. The current problem is that the content that should be displayed in other boxes is all displayed in the last box. I have just learned Angular not long ago. The question may be superficial, but I can't find the answer. Please explain it. Thank you. .