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

Posted 2023-03-06

技术标签:

【中文标题】使用 AngularUI Bootstrap 模态的 AngularJS 中的范围问题【英文标题】：Scope issue in AngularJS using AngularUI Bootstrap Modal 【发布时间】：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） 【参考方案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 将创建一个新的控制器范围

【讨论】：

以上是关于使用 AngularUI Bootstrap 模态的 AngularJS 中的范围问题的主要内容，如果未能解决你的问题，请参考以下文章

AngularUI Modal - 防止身体移位和滚动

如何防止 angular-ui 模态关闭？

将 AngularUI 连接到 Bootstrap 3 抛出错误

如何在自己的文件中定义模态控制器？

AngularJS、AngularUi（引导程序）和 NgRoute

你可以覆盖 AngularUI Bootstrap 中的特定模板吗？