web-dev-qa-db-de.com

Umfangsproblem in AngularJS mit Angular UI 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:

<!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>

Warum kann ich das in ModalInstanceCtrl definierte $ scope.text nicht erhalten, obwohl ich $ scope.ok und $ scope.cancel verwenden kann?

52
Manuel Bitto

Sieht nach einem Umfangsproblem aus. Ich habe es so zum Laufen gebracht:

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>
72
AlwaysALearner

pdate Nov 2014: Das Problem wurde mit Angular-UI-Bootstrap behoben .12. - Der Transclusion-Bereich wird mit dem Bereich des Controllers zusammengeführt. Es besteht keine Notwendigkeit, etwas zu tun. Bleib einfach bei:

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

Vor 0.12.0:

Angular-UI-Modale verwenden die Transklusion, um modalen Inhalt anzuhängen. Dies bedeutet, dass alle neuen Bereichseinträge, die innerhalb von modal vorgenommen werden, im untergeordneten Bereich erstellt werden.

Sie sollten die Vererbung verwenden und den leeren Eintrag text im übergeordneten $scope Initialisieren, oder Sie können die Eingabe explizit dem übergeordneten Bereich hinzufügen:

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

Lassen Sie mich versuchen, den Grund zu erklären. ui-bootstrap modaler Quellcode:

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

und der Quellcode der Vorlage - 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>

es gibt eine Direktive modal-transclude , Ihr Dialoginhalt wird darin eingefügt, es ist der Quellcode:

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

})

schauen Sie sich jetzt das offizielle Dokument von $ compile an:

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 erstellt einen neuen Bereich des Controller-Bereichs

3
笑笑十年