AngularJS指令ネストされたng-transclude内の隔離されたスコープ

Question

私はこのようなことをインターネット上で探してきましたが、まだ答えは見つかりません。

私はアプリケーション全体で再使用される指示文を持っています。これにより、ユーザーはアイテムのリストをソートして検索することができます。私はディレクティブ（私が渡すhtmlテンプレート）とそれらのテンプレートの複数の用途に渡すことができる複数の種類の項目を持っています。私は、時にはそのテンプレートにあるボタンがほしいと思うこともありますが、時には別のボタンが欲しいときもあります。 （これは分かります）。

したがって、私はこれを達成するためにtransclusionを持つ複数のディレクティブを作成しました。しかし、私はスコープに深刻な問題があります。子ディレクティブに分離されたスコープを渡す方法を正確に把握していないようです。以下は

は私のコードです：

項目リスト指令

var app = angular.module('main'); 

app.directive('itemList', function(){ 
    var linkFunction = function (scope, element, attributes, ctrl, transclude) { 
     //Things that modify the scope here. This scope is what I want to pass down to the child directives 
     //NOTE: I do not currently have a working transclude function which is why I didn't include it here because I have no idea what to do with it 
     scope.pagedItems = groupItemsToPages(items); 
     scope.currentPage = 0; 
    }; 

    return { 
     restrict: 'E', 
     replace: 'true', 
     transclude: true, 
     templateUrl: 'partials/directives/item-list.html', 
     link: linkFunction, 
     scope: { 
      searchPlaceholder: "@", 
      items: "=", 
      control: "=" 
     } 
    }; 
}); 

項目-するlist.html

<div class="form-group"> 
    <!-- I won't put all of the html here, just some to show you what i'm going for --> 

    <div class="search-field"> 
     <input type="text" ng-model="query.value" placeholder="{{searchPlaceholder}}/> 
    </div> 

    <table class="table table-hover"> 
     <tbody> 
      <tr ng-repeat="item in pagedItems[currentPage]"> 
        <td ng-transclude></td> 
      </tr> 
     </tbody> 
    </table> 

</div> 

ここでは単にそれに渡されたものは何でもテンプレートのURLを返しますディレクティブです。これは、さらなるネストされた結論を使って余分なHTMLを追加できるようにするためです。

アイテムtemplate.js

var app = angular.module('main'); 

app.directive('itemTemplate', function() { 
    return { 
     restrict: 'AE', 
     replace: 'true', 
     transclude: true, 
     templateUrl: function(tElement, tAttrs){ 
      return tAttrs.templateUrl; 
     } 
    }; 
}); 

ここで（非常にちょうどあなたのレイアウトを表示するには、再び簡素化）の例テンプレート

プロファイル-template.html

<div> 
    <p>item.name</p> 
    <p>item.description</p> 
</div> 
<div ng-transclude></div> 

はここだですこのコードを呼び出すHTMLの例

tab.html

<div class="tab"> 
    <div class="available-items"> 
     <item-list control="profileControl" search-placeholder="Search Profiles" items="profileControl.profiles"> 
      <item-template template-url="partials/profile-template.html"> 
       <button type="button" ng-click="launchProfile(item.id)">Launch Profile</button> 
      </item-template> 
     </item-list> 
    </div> 
</div> 

コードを見たことがあります。私が抱えている問題は、スコープのクローンを作成しようとしたにもかかわらず、私のprofile-template.htmlインクルードがその上のディレクティブからスコープを取得していないということです。私が見たすべての例では、ディレクティブからテンプレートキーを削除する必要があります。また、移入したコードのみを返すと仮定します。私の場合、私はテンプレートに表示したい他のhtmlを持っています。

すべてのヘルプは、代わりにあなたのディレクティブ間の範囲を渡そうと、あなたは$parent属性を利用し、高いスコープへのアクセスを得ることができ

Answer 1

をいただければ幸いです。例えば

、あなたがこのようなコードでitem-listから高い範囲へのアクセスを得ることができ、あなたのitem-templateコントローラで：

if ($parent.searchPlaceholder === '') { 
    ... 
}