AngularJS verfügt über die supergute ngTransclude-Direktive, die HTML in der Vorlage Ihrer Anweisung durch HTML aus der Vorlage des Controllers ersetzt. Wenn Sie in Ihrer Anweisung einen isolierten Bereich verwenden, können Sie mithilfe von ngTransclude auf Variablen aus dem Bereich des Controllers zugreifen.AngularJS-Transklusionsrichtlinie mit ngRepeat-Ergebnissen im gemischten Bereich
Ich habe versucht, dies zu tun, als ich mit einem scheinbar zufälligen Ergebnis endete. ngTransclude in einem ngRepeat hat den Wert aus dem Geltungsbereich der Direktive anstelle des Bereichs des Controllers zurückgegeben.
aus der Dokumentation AngularJS gehen, habe ich eine Plunker: http://plnkr.co/edit/GtrYtGoy2fnvgkwLFAGN?p=preview
JS
angular.module('docsTransclusionExample', [])
.controller('Controller', ['$scope', function($scope) {
$scope.names = ['Tobias', 'Funke'];
}])
.directive('myDialog', function() {
return {
restrict: 'E',
transclude: true,
scope: {},
templateUrl: 'my-dialog.html',
link: function (scope, element) {
scope.names = ['Jeff', 'Bridges'];
}
};
});
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example87-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="docsTransclusionExample">
<div ng-controller="Controller">
<my-dialog>Check out the contents, {{names}}!</my-dialog>
</div>
</body>
</html>
my-dialog.html
<div class="alert" ng-transclude></div>
<div ng-repeat="name in names">
<div class="alert" ng-transclude></div>
{{name}}
</div>
<div class="alert" ng-transclude></div>
Dieser Code gibt:
Check out the contents, ["Tobias","Funke"]!
Check out the contents, ["Jeff","Bridges"]!
Jeff
Check out the contents, ["Jeff","Bridges"]!
Bridges
Check out the contents, ["Tobias","Funke"]!
Gemäß der Dokumentation die ich gelesen habe, und diese Einbindung und Tive Artikel, den ich für Einbindung und Umfang gefunden, sollte Einbindung nur im Rahmen des Controllers übernehmen, in der Mitte zwei bedeutet „Check out der Inhalt, {{Namen}}! " sollte das gleiche wie die äußeren zwei lesen.
Weitere Experimente hatten ich die AngularJS Version von 1.2.15 auf den
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
1.3.0 rc zu ändern, die (soweit wie ich es verstehe) in der richtigen Ergebnissen Ausgabe:
Check out the contents, ["Tobias","Funke"]!
Check out the contents, ["Tobias","Funke"]!
Jeff
Check out the contents, ["Tobias","Funke"]!
Bridges
Check out the contents, ["Tobias","Funke"]!
Gibt es eine Problemumgehung für dieses Problem, das ich mit 1.2.15 verwenden kann oder bin ich bei der Verwendung dieser Version fest? Wie soll das richtige Verhalten sein?