问题描述
component_list.tpl<p class='component-list'> <ul role='tablist'><li role='presentation' ng-repeat='component_type in component_list' ng-class='{active:$first}'> <a href='https://www.6hehe.com/wenda/14658.html#{{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 id='PlugContent'><p role='tabpanel' ng-repeat='component_type in component_list' ng- id='{{component_type.id}}'> <ul class='list-group'><li ng-repeat='component_group in component_type.list'> <a href='https://www.6hehe.com/wenda/14658.html#' ng-bind='component_group.name'></a> <p class='boxes'><p se-component></p> </p></li> </ul></p> </p></p>component.tpl
<p ng-repeat='component in component_group.list' controller='{{component.controller}}' draggable='true'> <img src='https://www.6hehe.com/wenda/{{component.image}}'> <label ng-bind='component.name'></label></p>directive
// se-component-listBase.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-componentBase.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的内容直接替换<se-component></se-component>,输出是正常的,但是我需要为component添加拖拽事件。目前的问题是,本来应该显示在其他boxes里面的内容都集中显示在最后一个boxes里面了,小弟刚学angular没多久,问题可能比较肤浅,但却是搜不到答案,还请讲解下,谢谢。
问题解答
回答1:ng-repeat 是会创建自己的作用域的,子作用于访问 controller 的 $scope 需要$parent.xxx才行
建议你的seComponent 通过设置属性的方式来取内容
<p se-component list='component_type.list'></p>//具体是不是这样写忘了...,需要验证下,就是这个意思回答2:
发现把se-component的replace:true去掉,显示就正常了,但是会多了个<se-component>的标签,不好看