指令内的ng-repeat和ng-transclude
发布于 2021-02-01 10:26:21
我想在内容更改时创建具有自定义行为的列表。我尝试为此创建一个指令,但是我对如何将ng-transclude与ng-
repeat指令结合起来感到迷茫。有人可以让我走上正轨吗?
HTML:
<div ng-app="myApp">
<div ng-controller="ctrl">
<mylist items="myItem in items">
<span class="etc">{{myItem}}</span>
</mylist>
</div>
</div>
Javascript:
angular.module('myApp', [])
.controller('ctrl', function ($scope) {
$scope.items = ['one', 'two', 'three'];
})
.directive('mylist', function () {
return {
restrict:'E',
transclude: 'element',
replace: true,
scope: true,
template: [
'<ul>',
'<li ng-repeat="WhatGoesHere in items" ng-transclude></li>',
'</ul>'
].join(''),
link: function (scope, element, attr) {
var parts = attr.items.split(' in ');
var itemPart = parts[0];
var itemsPart = parts[1];
scope.$watch(itemsPart, function (value) {
scope.items = value;
});
}
}
});
我已经在这里工作了一部分
编辑:
条件:
- 该项目的模板必须在视图中定义,而不是在指令中定义,并且必须有权访问子作用域中的项目属性。理想情况下,我想像在ng-repeat指令中那样定义它
- 该指令必须有权访问列表,以便我可以设置适当的监视并进行更改。如果可能的话,我希望可以轻松访问所生成的DOM项(我也可以使用DOM之类的
element[0].querySelectorAll('ul>li')
东西,它只能在Chrome上运行)。 - 如果可能的话,我想重用ng-repeat指令中的逻辑,因为它已经做了很多我想做的事情。最好是我不想复制代码。我只是想增强它的行为,而不是改变它
关注者
0
被浏览
53
1 个回答
-
我自己解决了这个问题:
我可以在编译步骤(jsfiddle)中做到这一点,方法是在编译
ng- repeat
模板时添加属性,并向其提供属性的内容。HTML:
<div ng-app="myApp"> <div ng-controller="ctrl"> <mylist element="myItem in items">{{myItem}}</mylist> </div> </div>
Javascript:
var myApp = angular.module('myApp', []) .controller('ctrl', function ($scope) { $scope.items = ['one', 'two', 'three']; }) .directive('mylist', function ($parse) { return { restrict:'E', transclude: 'element', replace: true, scope: true, template: [ '<ul>', '<li ng-transclude></li>', '</ul>' ].join(''), compile: function (tElement, tAttrs, transclude) { var rpt = document.createAttribute('ng-repeat'); rpt.nodeValue = tAttrs.element; tElement[0].children[0].attributes.setNamedItem(rpt); return function (scope, element, attr) { var rhs = attr.element.split(' in ')[1]; scope.items = $parse(rhs)(scope); console.log(scope.items); } } } });