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

【字号: 日期:2023-01-23浏览:17作者:雯心

问题描述

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>的标签,不好看

相关文章: