senarai_komponen.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>

komponen.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>

arahan

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

Perihalan masalah: Jika saya menggantikan terus kandungan component.tpl dengan <se-component></se-component>, output adalah normal, tetapi saya perlu menambah acara seret untuk komponen. Masalah semasa ialah kandungan yang sepatutnya dipaparkan dalam kotak lain semuanya dipaparkan dalam kotak terakhir Saya baru belajar Angular tidak lama dahulu, tetapi saya tidak dapat mencari jawapannya. terima kasih.