在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并初始化父$scope空text条目，或者您可以显式将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控制器范围的新范围
- 如何通过$ http将angular-ui的typeahead与服务器绑定以进行服务器端优化？
- ui-bootstrap-tpls.min.js和ui-bootstrap.min.js有什么区别？
- 在Angular UI-Bootstrap中，“解除”模态和“closures”模态有什么区别？
- 如何将AngularUI集成到AngularJS？
- angularjs在控制器之间共享数据configuration
- Angular引导dateselect器date格式不会格式化ng模型值
- 如何实现RouteReuseStrategy应该针对Angular 2中的特定路线进行定义
- 如何使用ui-router为AngularJS提取查询参数？
- 使用哪一个，AngularUI Bootstrap或AngularStrap？
