Angularjs verschachtelte Direktive scopes

Question

Bitte beziehen Sie sich auf Plunker. Das Problem: Wenn ich die item-over-Direktive innerhalb des Hauptcontrollers verwende, löst dies einen feinen OnOver aus. Dies funktioniert OK:

<a href="#" ng-repeat="item in main.Data" item-over="main.OnOver(item)">{{item.Name}}</a> 

Aber wenn ich es in Listenansicht Richtlinie setzte es nicht auslösen die OnOver Methode der Steuerung. Das funktioniert nicht:

<list-view itemssource="main.Data"> 
    <a href="#" item-over="main.OnOver(item)">{{item.Name}}</a> 
</list-view> 

Was mache ich falsch?

Answer 1

Das Problem besteht darin, dass die ListView-Direktive einen isolierten Bereich erstellt, so dass Sie nicht auf den Hauptbereich oder das Element innerhalb des Bereichs dieser Direktive zugreifen können. Auch onOver wäre nicht zugänglich, weil es zum übergeordneten Bereich gehört,

Wenn Sie nicht besonders zwei-Wege-Bindung für itemSource in der Listview-Direktive benötigen, dann erben Sie den übergeordneten Bereich der Richtlinie, indem Sie scope: true in Return-Anweisung setzen.

Verwendung attr in Ihrer Richtlinie isoliert attr Wert zuzugreifen, ohne die Schaffung Scope-

return { 
    link:function (scope, element, attrs) { 
     scope.itemsSource = attrs.itemsSource 
    } 
} 

Sie die Itemssource gleiche Art und Weise passieren -

<list-view items-source="main.Data">

Jetzt haben Sie die Werte in der Richtlinie Umfang und Sie können mit ihnen spielen.

OR, da Sie den übergeordneten Bereich sind inherting können Sie direkt den Wert Elternteil mit $ - Deutsche in Ihrer Richtlinie:

link: function (scope, element) { 
    scope.itemsSource = scope.$parent.itemsSource 
} 

Beim Einchecken plunkr es einige weitere Probleme gab, lesen Sie in diesem Arbeitsbeispiel für Ihre plunkr - working plunkr