Problema de scope en AngularJS usando 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:

    

¿Por qué no puedo obtener $ scope.text definido en ModalInstanceCtrl, aunque puedo usar $ scope.ok y $ scope.cancel?

Parece un problema de scope. Lo tengo para que funcione así:

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

HTML:

  

Actualización de noviembre de 2014: el problema se soluciona con angular-ui-bootstrap 0.12.0 : el scope de la transclusión se fusiona con el scope del controlador. No hay necesidad de hacer nada. Solo quédate con:

  

Antes de 0.12.0:

Los modales de UI angular están usando la transclusión para adjuntar contenido modal, lo que significa que cualquier nueva entrada de ámbito dentro de modal se crea en el scope del niño.

Debe usar la herencia e inicializar la entrada de text vacía en el $scope o puede adjuntar explícitamente la entrada al scope principal:

  

Vamos a tratar de explicar el motivo. código fuente modal ui-bootstrap:

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

y la plantilla sourcecode – window.html:

  

hay una directiva modal-transclude , su contenido de diálogo se insertará en él, es código fuente:

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

})

ahora eche un vistazo al documento oficial de $ compile:

 Transclusion Functions When a directive requests transclusion, the compiler 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 compiled contents linked to a **new transclusion scope.** 

transclude creará un nuevo ámbito de scope del controlador