Rückruf an nicht isolierten Bereich senden Kind

Question

Ich muss einen Rückruf zu einer Child-Direktive hinzufügen, das ist kein isolierter Bereich. Ich weiß, dass Sie es mit einem isolierten Bereich tun können, Sie können auch scope. $ Parent verwenden, um darauf zuzugreifen, jedoch ist dies nicht immer korrekt, wenn der unmittelbare Elternteil der falsche Elternteil ist.

myApp.directive('parentDirective', function() { 
    return { 
    link: function(scope) { 
     scope.callback = function(msg) { 
     alert(msg); 
     } 
    } 
    } 
}); 

myApp.directive('childDirective', function() { 
    return { 
    scope: true, 
    link: function(scope, element, attrs) { 
     var msg = 'from child'; 
     if (angular.isDefined(attrs.callback)) { 
     scope.$parent.$apply(attr.callback); 
     } 
    } 
    } 
}); 

Dies funktioniert, aber ich mag es nicht, ich hasse $ manuell mit auslösen anwenden oder $ zu verdauen, hassen auch noch versuchen, Umfang zugreifen. $ Parent, da dieser Bereich nicht immer die beabsichtigte ist ...

Gibt es dafür eine bessere Lösung?

Answer 1

Das Problem ist, dass isolierte Bereiche nicht prototypisch erben, wenn Sie von einem isolierten Bereich zu einer Kind-Direktive (verschachtelt) analysieren müssen, müssen Sie den Inhalt manuell umwandeln und den isolierten Bereich als Kontext verwenden.

var myApp = angular.module('myApp', []) 
    .directive('myWrapperDirective', function() { 
    return { 
     scope: {}, 
     transclude: true, 
     link: function($scope, $element, $attrs, $null, $transclude) { 
     $scope.name= 'test'; 
     $transclude($scope, function(clone) { 
      $element.append(clone); 
     }); 
     } 
    } 
    }) 
    .directive('myNestedDirective', function() { 
    return { 
     scope: true, 
     link: function($scope, $element, $attrs) { 
     // now child directive and parent share same scope. 
     console.log($scope.name); 
     } 
    }; 
    }); 

Vorlage:

<div my-wrapper-directive> 
    Hello, {{name}}! 
    <div my-nested-directive> 
    {{name}} 
    </div> 
</div> 

Demo: http://jsfiddle.net/xM92P/786/