Angular UI模式的范围问题
我无法理解/使用angular度UI模式的范围。
虽然在这里不是很明显，但是我已经正确地设置了模块和一切（尽我所知），但是这些代码示例尤其是我发现错误的地方。
index.html（它的重要部分）
<div class="btn-group"> <button class="btn dropdown-toggle btn-mini" data-toggle="dropdown"> Actions <span class="caret"></span> </button> <ul class="dropdown-menu pull-right text-left"> <li><a ng-click="addSimpleGroup()">Add Simple</a></li> <li><a ng-click="open()">Add Custom</a></li> <li class="divider"></li> <li><a ng-click="doBulkDelete()">Remove Selected</a></li> </ul> </div> Controller.js（同样是重要的部分）
MyApp.controller('AppListCtrl', function($scope, $modal){ $scope.name = 'New Name'; $scope.groupType = 'New Type'; $scope.open = function(){ var modalInstance = $modal.open({ templateUrl: 'partials/create.html', controller: 'AppCreateCtrl' }); modalInstance.result.then(function(response){ // outputs an object {name: 'Custom Name', groupType: 'Custom Type'} // despite the user entering customized values console.log('response', response); // outputs "New Name", which is fine, makes sense to me. console.log('name', $scope.name); }); }; }); MyApp.controller('AppCreateCtrl', function($scope, $modalInstance){ $scope.name = 'Custom Name'; $scope.groupType = 'Custom Type'; $scope.ok = function(){ // outputs 'Custom Name' despite user entering "TEST 1" console.log('create name', $scope.name); // outputs 'Custom Type' despite user entering "TEST 2" console.log('create type', $scope.groupType); // outputs the $scope for AppCreateCtrl but name and groupType // still show as "Custom Name" and "Custom Type" // $scope.$id is "007" console.log('scope', $scope); // outputs what looks like the scope, but in this object the // values for name and groupType are "TEST 1" and "TEST 2" as expected. // this.$id is set to "009" so this != $scope console.log('this', this); // based on what modalInstance.result.then() is saying, // the values that are in this object are the original $scope ones // not the ones the user has just entered in the UI. no data binding? $modalInstance.close({ name: $scope.name, groupType: $scope.groupType }); }; });
create.html（完整）
<div class="modal-header"> <button type="button" class="close" ng-click="cancel()">x</button> <h3 id="myModalLabel">Add Template Group</h3> </div> <div class="modal-body"> <form> <fieldset> <label for="name">Group Name:</label> <input type="text" name="name" ng-model="name" /> <label for="groupType">Group Type:</label> <input type="text" name="groupType" ng-model="groupType" /> </fieldset> </form> </div> <div class="modal-footer"> <button class="btn" ng-click="cancel()">Cancel</button> <button class="btn btn-primary" ng-click="ok()">Add</button> </div>
所以，我的问题是：为什么范围没有双重绑定到UI？ 为什么this有自定义的值，但$scope不？
我曾尝试将ng-controller="AppCreateCtrl"到create.html中的正文div，但抛出了一个错误：“未知的提供者：$ modalInstanceProvider < – $ modalInstance”所以没有运气。
在这一点上，我唯一的select是传回一个对象与this.name和this.groupType而不是使用$scope ，但是感觉不对。
提前致谢！ 🙂
更新：除了Nikosbuild议的阅读外，还有这个可以帮助的陷阱列表 。 这个问题是陷阱＃5的一个例子。
我有我的工作是这样的：
var modalInstance = $modal.open({ templateUrl: 'partials/create.html', controller: 'AppCreateCtrl', scope: $scope // <-- I added this });
没有表单名称，没有$parent 。 我正在使用AngularUI Bootstrap版本0.12.1。
我被这个解决了这个解决scheme。
当涉及嵌套的作用域时，不要直接将<input>绑定到作用域的成员：
<input ng-model="name" /> <!-- NO -->
将它们绑定到更深层次：
<input ng-model="form.name" /> <!-- YES -->
原因是范围原型inheritance了他们的父范围。 因此，在设置第一级成员时，这些成员直接设置在子范围上，而不会影响父级。 与此相反，当绑定到嵌套字段（ form.name ）时，会从父范围读取成员form ，因此访问name属性将访问正确的目标。
在这里阅读更详细的描述。
2014年11月更新 ：
其实你的代码应该升级到ui-bootstrap 0.12.0后工作。 Transcluded范围与控制器的范围合并，因此不再需要$parent或form. 东东。
在0.12.0之前 ：
模态使用transclusion来插入其内容。 感谢ngForm你可以通过name属性来控制范围。 所以为了逃避被超越的范围，只需要这样修改表单：
<form name="$parent">
要么
<form name="$parent.myFormData">
模型数据将在控制器范围内可用。
$scope.open = function () { var modalInstance = $uibModal.open({ animation: $scope.animationsEnabled, templateUrl: 'myModalContent.html', controller: 'salespersonReportController', //size: size scope: $scope }); };
它适用于我范围：$范围谢谢你杰森·斯威特
我添加范围：$范围，那么它的作品。酷
