使用 AngularUI Bootstrap 模态的 AngularJS 中的范围问题答案

【问题标题】：Scope issue in AngularJS using AngularUI Bootstrap Modal使用 AngularUI Bootstrap 模态的 AngularJS 中的范围问题
【发布时间】：2013-09-13 23:56:24
【问题描述】：

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>

为什么我无法获取 ModalInstanceCtrl 中定义的 $scope.text，即使我可以使用 $scope.ok 和 $scope.cancel？

【问题讨论】：

那是因为您在分配前提醒 $scope.text。只需在控制器中写入$scope.text = "abc";，您就会在警报中看到。
输入来自modal.html。请查看相关的插件。
糟糕！对于那个很抱歉。看看我的回答。
QuantumUI 模态更灵活并且有很好的文档。你可以试试（angularui.net）

标签： angularjs angular-ui angular-ui-bootstrap

【解决方案1】：

看起来像是范围问题。我让它像这样工作：

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>

【讨论】：

是的，初始化$scope.input = {}; 修复它。不过很奇怪。
这并不奇怪，这是设计使然，因为模态实际上创建了一个子控制器，而 JS 行为是，如果您尝试获取一个对象并且您的对象没有它，那么它就会消失给父母
对，这是因为 Javascript 的原型继承。它无法在当前作用域上找到“输入”，因此它会检查该作用域的原型，依此类推，直到它发生在原型链中一个作用域上的“输入”属性上。这个“输入”属性是一个对象，因此您可以引用它并且可以在其上设置“abc”属性。这个小技巧通常在 Angular 中用于操作祖先作用域中某处的值。
没错，这没什么奇怪的——尽管 Javascript 的原型继承可能很难掌握。我强烈建议您阅读以下内容以进行澄清：github.com/angular/angular.js/wiki/Understanding-Scopes
我认为将所有作用域变量绑定为对象被认为是 Angular 的最佳实践，这样您就不必担心按值传递变量，并且您可以保持 2 路绑定

【解决方案2】：

2014 年 11 月更新： angular-ui-bootstrap 0.12.0 修复了该问题 - 嵌入范围与控制器范围合并。没有必要做任何事情。留在身边：

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

0.12.0 之前：

Angular-UI 模态使用嵌入来附加模态内容，这意味着在模态中创建的任何新范围条目都是在子范围中创建的。

您应该使用继承并在父 $scope 中初始化空的 text 条目或者您可以将输入显式附加到父范围：

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

【讨论】：

【解决方案3】：

让我试着解释一下原因。 ui-bootstrap modal 源码：

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

以及模板源代码——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>

有一个指令modal-transclude，你的对话内容会插入其中，它是源代码：

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

})

现在看看 $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 将创建一个新的控制器范围

【讨论】：