Problème de portée dans AngularJS à l'aide de AngularUI Modal Bootstrap

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:

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>

  <div ng-controller="ModalDemoCtrl">
    <button class="btn" ng-click="open()">Open me!</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
  </div>
 </body>
</html>

modal.html:

<div class="modal-header">
    <h3>I'm a modal!</h3>
</div>
<textarea ng-model="text"></textarea>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

Pourquoi je ne peux pas obtenir le $scope.texte défini dans ModalInstanceCtrl, même si je peux utiliser $champ d'application.ok et $champ d'application.annuler?

  • C'est parce que vous êtes alerte $champ d'application.texte avant la cession. Il suffit d'écrire $scope.text = "abc"; dans votre contrôleur et vous allez voir que dans l'alerte.
  • L'entrée vient de modal.html. Veuillez voir le plunker.
  • Oups! Désolé à ce sujet. Jetez un oeil à ma réponse.
  • QuantumUI modal est plus flexiable et avoir une bonne documentation. Vous pouvez l'essayer (angularui.net)
InformationsquelleAutor Manuel Bitto | 2013-09-10
  1. 72

    Ressemble à un problème de portée. Je l'ai eu à travailler comme ça:

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

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
};

    HTML:

    <textarea ng-model="input.abc"></textarea>
    • Oui, l'initialisation de $scope.input = {}; il fixe. Chose étrange cependant.
    • Ce n'est pas étrange, c'est par la conception depuis la modale d'ailleurs créé un sous-contrôleur, et JS problème est que si vous essayez d'obtenir un objet et que votre objet n'a pas que ça aille parent
    • À droite, c'est à cause de Javascript de l'héritage par prototype. Il ne peut pas trouver "entrée" sur la portée actuelle, de sorte qu'il vérifie que le champ d'application du prototype et ainsi de suite jusqu'à ce qu'il se passe sur une "entrée" de la propriété sur l'un des champs d'application dans la chaîne de prototype. Cette "entrée" de la propriété est un objet de sorte que vous avez une référence et sont en mesure de définir une "abc" de propriété sur elle. Cette petite astuce est souvent utilisé dans angulaire de manipuler une valeur quelque part dans un ancêtre de la portée.
    • Vrai, rien d'étrange à ce sujet - bien que le Javascript est l'héritage par prototype pourrait être difficile à saisir. Je recommande vivement cette lecture pour plus de précision: github.com/angular/angular.js/wiki/Understanding-Scopes
    • Merci! Mais pourquoi $scope.input=""; pas de travail?
    • Je crois que c'est considéré comme une bonne pratique dans angulaire de lier tous à votre portée des variables comme des objets, de sorte que vous n'avez pas à vous soucier de passer des variables par valeur, et vous l'entretien de votre 2 voies de liaison
    • Une autre chose que vous pourriez faire est de passer tout ce que vous devez "ok()" de la fonction. ok(text). En fait, de plus en plus puissants dans le long terme.
    • Ici et ici sont les meilleures explications à mon avis.
    • Merci, Ça m'aide beaucoup 🙂

    InformationsquelleAutor AlwaysALearner
  2. 16

    Mise à jour Novembre 2014: le problème est résolu avec angular-ui-bootstrap 0.12.0 - la transclusion portée est fusionné avec le contrôleur de la portée. Il n'y a pas besoin de faire quoi que ce soit. Juste rester avec:

    <textarea ng-model="text"></textarea>

    Avant 0.12.0:

    Angular-UI les auxiliaires modaux sont à l'aide de transclusion de joindre modal de contenu, ce qui signifie que toutes les nouvelles entrées faites dans les modaux sont créés dans enfant.

    Vous devez utiliser l'héritage et initialiser vide text entrée dans le parent $scope
    ou vous pouvez explicitement joindre l'entrée à la portée parent:

    <textarea ng-model="$parent.text"></textarea>
    InformationsquelleAutor gertas
  3. 3

    Me laisser tenter d'expliquer la raison. ui-modal bootstrap source:

    .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';
  },

    et le modèle de code source - window.html:

    <div tabindex="-1" role="dialog" class="modal fade" ng-class="{in: animate}" ng-style="{'z-index': 1050 + index*10, display: 'block'}" ng-click="close($event)">
<div class="modal-dialog" ng-class="{'modal-sm': size == 'sm', 'modal-lg': size == 'lg'}"><div class="modal-content" modal-transclude></div></div>

    il existe une directive modal-transclude，votre boîte de dialogue contenu s'insérer en elle, 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);
    });
  }
};

    })

    maintenant, jetez un oeil à la doc officiel de $compiler:

    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 permettra de créer un nouveau champ d'application de contrôleur de portée

    InformationsquelleAutor 笑笑十年