1

2つのものを別々の場所にトランスクルージョンできるディレクティブを作成しようとしていますが、そのうちの1つは ですがng-repeat、コンパイル関数で$transclude ブレークを使用して return を返しますが、その中でそれundefined is not a functionを行うと機能しますが、コンテンツがありません。pre-compileng-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
4

0 に答える 0