在AngularJS中使用AngularUI Bootstrap Modal的范围问题

抢劫者: 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?

看起来像一个范围问题。 我得到这样的工作:

 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> 

2014年11月更新:使用angular-ui-bootstrap 0.12.0修复了问题 – 将包含范围与控制器的作用域合并。 没有必要做任何事情。 留在:

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

在0.12.0之前:

Angular-UI模式使用transclusion来附加模态内容,这意味着在模态中创build的任何新的作用域条目都是在子作用域中创build的。

您应该使用inheritance并初始化父$scopetext条目,或者您可以显式将input附加到父范围:

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

让我们试着解释一下原因。 ui-bootstrap模态源代码:

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

有一个指令模式 – 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将创build控制器范围的新范围