2つのものを別々の場所にトランスクルージョンできるディレクティブを作成しようとしていますが、そのうちの1つは ですがng-repeat
、コンパイル関数で$transclude
ブレークを使用して return を返しますが、その中でそれundefined is not a function
を行うと機能しますが、コンテンツがありません。pre-compile
ng-repeat
私のコードは次のようになります
.directive('sidebarItem', ['_', function(_) {
return {
replace: true,
transclude: true,
scope: {
title: '@',
state: '@',
activeState: '=',
dropdown: '='
},
compile: function(ele, attrs, transclude) {
transclude(ele) // This returns error
return {
pre: function(scope, ele,attrs, ctrl, trns) {
trns(scope) // This has my transcluded content but the ng-repeat is empty
}
}
}
}
}
また、空の ng-repeat を返す手動トランスクルードを試してみました
trns(scope.$parent, function(tEle, tScope) {
var repeat = tEle[1].querySelector('[repeat]'),
newEle = angular.element('<li ng-repeat="item in studentDropdown"></li>'),
dropdown = ele[0].querySelector('.dropdown')
tScope.studentDropdown // Can access here
newEle.append(repeat.innerHTML)
angular.injector(['ng']).get('$compile')(newEle) // returns ng-repeat comment but no items
angular.element(dropdown).append(newEle)
})
サイドバー項目のテンプレート
li.sidebar-item(ng-class='{active: active, dropdown: dropdown, "dropdown-open": isDropdownOpen}')
.sidebar-content
a.sidebar-item-link(ng-if='!dropdown' ui-sref='{{state}}')
a.sidebar-item-link(ng-if='dropdown' ng-click='toggleDropdown()')
.icon(ng-transclude)
.title {{ title }}
.down-arrow(ng-if='dropdown')
ul.dropdown(ng-if='dropdown')
ディレクティブの使用
sidebar-item
div(has-dropdown)
div(icon)
//icon stuff
div(dropdown)
li(ng-repeat='item in dropdown')
| {{ item }}
代替使用
sidebar-item
div(has-dropdown)
div(icon)
//icon stuff
div(dropdown)
li Item 1
li Item 2