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

component_list.tpl

• ng-class="{active:$first}">

  aria-controls="{{component_type.id}}" aria-expanded="true"

  ng-bind="component_type.name">

ng-repeat="component_type in component_list"

ng-class="{active:$first,in:$first}"

id="{{component_type.id}}">

component.tpl

controller="{{component.controller}}" draggable="true">

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没多久，问题可能比较肤浅，但却是搜不到答案，还请讲解下，谢谢。