1

次のようなディレクティブがあります。

<selectable-item-list items="model.items">
    <item-template>
          <span ng-bind="item.text"></span>
    </item-template>
</selectable-item-list>

問題は にあり<item-template>ます。内部が の中でバインドされている場合、 は現在反復されている項目itemの参照になります。ng-repeat<selectable-item-list>

私の知る限り、トランスクルージョンはディレクティブのスコープを見ることができないようです。したがって、item.textまったくないため、バインドできませんitem。

このシナリオをどのように解決しますか? 以前は手動でトランスクルージョン<item-template>していましたが、他のアプローチには他の欠点/問題がありました。

これは、私の実際のケースのサンプルとして機能する実行可能なコード スニペットです。

var app = angular.module("app", []);

app.controller("some", function() {
  this.items = [{
    text: "hello"
  }, {
    text: "bye"
  }];
});

app.directive("test", function() {
  return {
    template: `<ol>
                  <li ng-repeat="item in items">
                      <div ng-transclude="itemTemplate"></div>
                  </li>
                </ol>`,
    transclude: {
      "itemTemplate": "itemTemplate"
    },
    scope: {
      "items": "="
    }
  }
});
<script src="https://code.angularjs.org/1.5.7/angular.js"></script>

<div ng-app="app" ng-controller="some as some">
  <test items="some.items">
    <item-template>
      <span ng-bind="item.text"></span>
    </item-template>
  </test>
</div>

4

1 に答える 1

1

前提が間違っていた！トランスクルードされたコンテンツが含まれるディレクティブスコープにアクセスできないと言ったとき、私は間違っていました。なぜなら、この他の Q&A が原因です: これは完全に時代遅れです。

実際、同じ Q&A の一部として別の回答があり、誰かがこれが修正され、transcluded コンテンツが を使用して直接ディレクティブ スコープにアクセスできる$parentと説明しています。

そこで、itemプロパティへのアクセスをに置き換えるだけで問題を修正し、$parent.itemうまくいきました!

この修正を含む作業コード スニペットを追加しました。

var app = angular.module("app", []);

app.controller("some", function() {
  this.items = [{
    text: "hello"
  }, {
    text: "bye"
  }];
});

app.directive("test", function() {
  return {
    template: `<ol>
                  <li ng-repeat="item in items">
                      <div ng-transclude="itemTemplate"></div>
                  </li>
                </ol>`,
    transclude: {
      "itemTemplate": "itemTemplate"
    },
    scope: {
      "items": "="
    }
  }
});
<script src="https://code.angularjs.org/1.5.7/angular.js"></script>

<div ng-app="app" ng-controller="some as some">
  <test items="some.items">
    <item-template>
      <span ng-bind="$parent.item.text"></span>
    </item-template>
  </test>
</div>

于 2016-07-08T19:22:21.563 に答える