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>

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

Description du problème : si je remplace directement le contenu de composant.tpl par <se-component></se-component>, la sortie est normale, mais je dois ajouter un événement glisser pour le composant. Le problème actuel est que le contenu qui doit être affiché dans les autres cases est entièrement affiché dans la dernière case. Je viens d'apprendre Angular il n'y a pas longtemps. La question est peut-être superficielle, mais je ne trouve pas la réponse. Merci. .