コンテンツが変更されたときのカスタム動作を備えたリストを作成したいと考えています。このためのディレクティブを作成しようとしましたが、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 アイテムに簡単にアクセスしたいと思います (
element[0].querySelectorAll('ul>li')
Chrome でのみ動作する必要があります)。 - 可能であれば、ng-repeat ディレクティブのロジックを再利用したいと考えています。これは、既に多くのことを実行しているためです。できれば、コードをコピーしたくありません。動作を変更するのではなく、動作を拡張したいだけです