Problème de scope dans AngularJS avec AngularUI Bootstrap Modal

Plunker: http://plnkr.co/edit/wURNg8ByPYbEuQSL4xwg

example.js:

angular.module('plunker', ['ui.bootstrap']); var ModalDemoCtrl = function ($scope, $modal) { $scope.open = function () { var modalInstance = $modal.open({ templateUrl: 'modal.html', controller: 'ModalInstanceCtrl' }); }; }; var ModalInstanceCtrl = function ($scope, $modalInstance) { $scope.ok = function () { alert($scope.text); }; $scope.cancel = function () { $modalInstance.dismiss('cancel'); }; }; 

index.html:

          
Selection from a modal: {{ selected }}

modal.html:

    

Pourquoi je ne peux pas obtenir le $ scope.text défini dans ModalInstanceCtrl, même si je peux utiliser $ scope.ok et $ scope.cancel?

Ressemble à un problème de scope. Je l’ai fait fonctionner comme ça:

 var ModalInstanceCtrl = function ($scope, $modalInstance) { $scope.input = {}; $scope.ok = function () { alert($scope.input.abc); }; $scope.cancel = function () { $modalInstance.dismiss('cancel'); }; }; 

HTML:

  

Mise à jour Nov 2014: le problème est résolu avec angular-ui-bootstrap 0.12.0 – la scope de la transclusion est fusionnée avec la scope du contrôleur. Il n’y a pas besoin de faire quoi que ce soit. Reste juste avec:

  

Avant 0.12.0:

Les modaux de l’interface utilisateur angular utilisent la transclusion pour attacher le contenu modal, ce qui signifie que toute nouvelle entrée de scope effectuée dans le mode modal est créée dans la scope de l’enfant.

Vous devez utiliser l’inheritance et initialiser une entrée de text vide dans parent $scope ou vous pouvez explicitement joindre l’entrée à la scope parent:

  

Essayons d’expliquer la raison. Code source modal ui-bootstrap:

 .directive('modalWindow', ['$modalStack', '$timeout', function ($modalStack, $timeout) { return { ressortingct: 'EA', scope: { index: '@', animate: '=' }, replace: true, transclude: true, templateUrl: function(tElement, tAttrs) { return tAttrs.templateUrl || 'template/modal/window.html'; }, 

et le template sourcecode – window.html:

  

il y a une directive modal-transclude content le contenu de votre boîte de dialog va l’insérer, c’est le code source:

 .directive('modalTransclude', function () { return { link: function($scope, $element, $attrs, controller, $transclude) { $transclude($scope.$parent, function(clone) { $element.empty(); $element.append(clone); }); } }; 

})

jetez maintenant un oeil à la documentation officielle de $ comstack:

 Transclusion Functions When a directive requests transclusion, the comstackr extracts its contents and provides a transclusion function to the directive's link function and controller. This transclusion function is a special linking function that will return the comstackd contents linked to a **new transclusion scope.** 

transclude va créer une nouvelle scope de la scope du contrôleur