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.namethis.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范围与控制器的范围合并,因此不再需要$parentform. 东东。

在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 }); }; 

它适用于我范围:$范围谢谢你杰森·斯威特

我添加范围:$范围,那么它的作品。酷