1

だから、私はこれをどのように変えるかを理解しようとして、過去数時間キーボードに頭をぶつけていました：

<scope-filter label="Sort by" type="sort">  
    <scope-filter-item key="recent">Recent Activity</scope-filter-item>  
    <scope-filter-item key="influence">Influence</scope-filter-item>
    <scope-filter-item key="loyalty">Loyalty</scope-filter-item>
    <scope-filter-item key="followers">Followers</scope-filter-item>
    <scope-filter-item key="visits">Visits</scope-filter-item>
</scope-filter>

これに：

<div>
  <label>Sort By:</label>
  <ul>
    <li>Recent Activity</li>
    <li>Influence</li>
    <li>Loyalty</li>
    <li>Followers</li>
    <li>Visits</li>
  </ul>
</div>

これを使用: http://jsfiddle.net/qBnDF/14/

奇妙な理由で、エントリはテンプレート内に含まれている場合にscope-filter-itemのみ処理され、関連付けられます。scope-filter<div ng-transclude></div>scope-filter.html

このディレクティブが実行することは他にもたくさんありますが、単純にするために、実際の問題に関係のない不要なものをすべて抽出します。

require: '^thingToRequire'ディレクティブについて読んだことから、構文を使用して親から子にコントローラーを渡すことができるはずです。linkこれにより、親コントローラーが子コントローラーメソッドに挿入されます。

ここで何が起こっているのかよくわかりません。申し訳ありませんが、私は現時点では角ばった初心者であり、これは一種のブードゥー教/黒魔術です。

どんな助けでも大歓迎です！

4

2 に答える 2

2

これがあなたが望むものかどうかを確認してください：

HTML

<script type="text/ng-template" id="scope-filter.html">
  <div>
    <label>{{ label }}:</label>            
      <ul ng-transclude></ul>           
  </div>
</script>

Javascript

sandbox.directive('scopeFilterItem', function () {
  return {
    restrict: 'E',
    require: '^scopeFilter',
    transclude: true,
    template: '<li ng-transclude></li>',
    link: function (scope, iElement, iAttrs, scopeFilter) {
        scopeFilter.addScopeFilterItem(iAttrs.key)
    }
  }
});

ここでjsFiddle 。

この例では必要ないため、valueから引数を削除しました。addScopeFilterItem何らかの理由で元に戻す必要がある場合は、おそらく - に新しい属性を追加して、そこから取得することをお勧めしscopeFilterItemますvalue。

<scope-filter>最後に、トランスクルージョンを使用して、Angular がタグの内容を破棄しないようにする必要があります。この小さなjsFiddleスクリプトを確認すると、トランスクルージョンが有効になっている場合にのみ、ディレクティブのコンテンツがレンダリングされることに注意してください。

于 2013-09-06T04:24:48.143 に答える
0

scope-filter.html テンプレート内に含めた場合、scope-filter-item エントリのみが処理され、scope-filter に関連付けられます

scope-filter-itemは、DOM のどこにも存在しないとリンク関数を呼び出しません。ng-transclude全体をコンパイルしてscope-filterDOMに挿入することで、コードが機能しました。

達成したいことに応じて、いくつかのオプションがあります。

  1. Michael Benford のアドバイスに従ってください。
  2. scope-filter-itemタグの代わりに別の方法でデータを提供します。たとえば、ng-modelディレクティブを使用してアイテム オブジェクトを公開します。これは簡単ですが、あなたの決定の背後にある理由がわからないので、これは適切ではないかもしれません.
  3. scopeFilterItemディレクティブをドロップし、手動トランスクルージョンでアイテムを取得しscopeFilterます。

実施例。

JavaScript

sandbox.directive('scopeFilter', function () {
    return {
        transclude: true,
        replace: true,
        restrict: 'E',
        templateUrl: 'scope-filter.html',
        scope: {
            label: '@label',
            type: '@type'
        },
        controller: function ($scope, $transclude) {
            $scope.items = [];
            $transclude(function (clone) {
                angular.forEach(clone, function(item) {
                    if (item.tagName !== "SCOPE-FILTER-ITEM") return;
                    $scope.items.push({
                        key: item.getAttribute("key"),
                        value: item.innerText
                    });
                });
            });
        }
    }
})

HTML

<script type="text/ng-template" id="scope-filter.html">
    <div>
        <label>{{ label }}:</label>
        <ul>
            <li ng-repeat="item in items">{{ item.key }}</li>
        </ul>
    </div>
</script>

この記事では、トランスクルージョンの例をいくつか紹介します。役に立つかもしれません。

于 2013-09-06T05:18:29.590 に答える