AngularJS ha la direttiva super nifTransclude, che sostituisce html nel modello della direttiva con html dal modello del controllore. Se si sta utilizzando un ambito isolato nella direttiva, è possibile accedere alle variabili dall'ambito del controllore utilizzando ngTransclude.AngularJS Direttiva Transclusione con ngRepeat risultati in ambito misto
Stavo tentando di farlo quando ho finito con un risultato apparentemente casuale. ngTransclude all'interno di ngRepeat ha restituito il valore dall'ambito della direttiva anziché dall'ambito del controller.
Andando fuori della documentazione AngularJS, ho creato un 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>
Questo codice restituisce:
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"]!
Secondo la documentazione che ho letto, e questo inclusione e gli ambiti articolo che ho trovato per inclusione e la portata, inclusione dovrebbe SOLO accettare portata del controllore, cioè al centro due "check out il contenuto, {{nomi}}! " dovrebbe leggere lo stesso dei due esterni.
un'ulteriore sperimentazione mi ha fatto cambiare la versione AngularJS dalla 1.2.15 alla 1.3.0 rc
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
che si traduce nella corretta (per quanto ho capito) Uscita:
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"]!
C'è una soluzione per questo problema che posso usare con 1.2.15 o sono bloccato quando utilizzo questa versione? Qual è il comportamento corretto dovrebbe essere?