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的內容直接替換，輸出是正常的，但是我需要為component添加拖曳事件。目前的問題是，本來應該顯示在其他boxes裡面的內容都集中顯示在最後一個boxes裡面了，小弟剛學angular沒多久，問題可能比較膚淺，但卻是搜不到答案，還請講解下，謝謝。

Answer 1

ng-repeat 是會創建自己的作用域的，子作用於訪問 controller 的 $scope 需要
$parent.xxx
才行

建議你的seComponent 透過設定屬性的方式來取內容

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

Answer 2

發現把se-component的replace:true去掉，顯示就正常了，但是會多了個的標籤，不好看