AngularJS Direktive Isolierter Bereich innerhalb verschachtelter ng-transclude

Question

Ich habe überall im Internet nach so etwas gesucht und ich kann immer noch nicht die Antwort finden.

Ich habe eine Direktive, die in meiner gesamten Anwendung wiederverwendet wird, es ermöglicht dem Benutzer, Listen von Elementen zu sortieren und zu durchsuchen. Ich habe mehrere Arten von Elementen, die an die Direktive übergeben werden können (HTML-Vorlagen, die ich übergebe) sowie mehrere Verwendungen für diese Vorlagen. Das heißt, manchmal möchte ich eine bestimmte Schaltfläche auf dieser Vorlage, aber manchmal möchte ich eine andere. (Dies wird in einer Minute mehr Sinn machen).

Daher habe ich mehrere Direktiven mit Transclusion erstellt, um dies zu erreichen. Allerdings habe ich ernsthafte Probleme mit dem Scoping und ich kann nicht genau herausfinden, wie der isolierte Bereich an die Child-Direktive übergeben wird.

Unten ist mein Code:

Artikelliste Richtlinie

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: "=" 
     } 
    }; 
}); 

Artikel-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> 

Hier ist die Direktive, die die URL jeglicher Vorlage gibt einfach wird an sie übergeben . Dies ist so, dass ich einen zusätzlichen HTML-Code durch weitere geschachtelte Transklusionen hinzufügen kann.

Artikel-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; 
     } 
    }; 
}); 

Hier ist ein Beispiel-Vorlage (extrem wieder vereinfacht, nur das Layout zeigen)

profile-template.html

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

ein hier Beispiel des HTML, das diesen Code aufruft

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> 

So jetzt, dass Sie den Code gesehen haben. Das Problem, das ich habe, ist, dass meine Profil-template.html Aufnahme den Bereich nicht von der Direktive über ihm erhält, obwohl ich versucht habe, den Bereich darauf zu klonen. Bei allen Beispielen, die ich gesehen habe, müssen Sie den Vorlagenschlüssel aus der Direktive entfernen und annehmen, dass Sie nur den Code zurückgeben, den Sie in Ihrer Transclusion haben. In meinem Fall habe ich andere HTML, die ich in der Vorlage anzeigen möchte.

Jede Hilfe wäre

Answer 1

Anstatt zu versuchen, den Umfang zwischen Richtlinien zu erkennen ist, können Sie die Verwendung des $parent Attributs machen passieren und den Zugang zu höheren Bereichen bekommen.

Zum Beispiel in Ihrem item-template Controller können Sie den Zugriff auf den höheren Umfang von item-list mit einem Code wie folgt gewinnen:

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