angularjs - example - ng-template context

$ scope no está disponible para ng-template

Question

Estoy tratando de usar modal para editar un formulario, el modal está en script ng-template, pero los datos del formulario no se muestran al hacer clic en el botón editar.
El $ scope no está disponible para el script de plantilla.
He creado un Plunker aquí

$scope.setCurrentItem = function (item) {
    $scope.currentItem = item;
};

$scope.edit = function (item) {            //editing item
    $scope.setCurrentItem(angular.copy(item));            
    //$scope.editItem = item;
    openEditModal();
};

<!--html-->
<script type="text/ng-template" id="myModalContent.html">     
<label for="name">Role: </label>                                
<input type="text" ng-model="currentItem.roleName" required />
</script>

¿Cómo puedo arreglar eso?

Answer 1

Por defecto, ui bootstrap $modal usa $rootScope como su alcance predeterminado. Pero está asumiendo que tomará automáticamente el alcance del controlador que abrió el diálogo, lo que no sucede. Pero hay una propiedad de scope que puede establecer para pasar el alcance al modo ui para que use ese alcance y cree un ámbito hijo fuera del alcance provisto y se usará como el alcance subyacente para el modal. Por lo tanto, haga que su envoltorio modal tome la propiedad scope también en su configuración y la transmita.

Del Doc

ámbito: una instancia de ámbito que se utilizará para el contenido modal (de hecho, el servicio modal $ va a crear un ámbito hijo de un alcance provisto). El valor predeterminado es $ rootScope.

Cambios de ejemplo:

  function openEditModal() {
     var modalOptions = {
        closeButtonText: ''Cancel'',
        actionButtonText: ''Save role'',
        headerText: ''Edit role'',
        bodyText: '''',
        scope:$scope //<-- Pass scope
    };

    Modal.showModal({ templateUrl: ''myModalContent.html'', size: ''lg'' }, modalOptions).then(function (result) {
        console.log("save!", result);
    });
  }

y en su servicio: -

  /*I just did this here based on my limited understanding of your code*/
  return $modal.open(angular.extend(tempModalDefaults, customModalOptions)).result;

Desde su plantilla modal, devuelva el artículo, no estoy seguro de si su plantilla es genérica, en caso afirmativo, es posible que desee adoptar un enfoque diferente para transferir los datos:

  <button class="btn btn-primary" ng-click="modalOptions.ok(currentItem)">{{modalOptions.actionButtonText}}</button>

Manifestación