Angular UI 模态的范围问题
Scope issues with Angular UI modal
我在理解/使用角度 UI 模态的作用域时遇到问题。
虽然在这里不是很明显,但我正确设置了模块和所有内容(据我所知),但这些代码示例尤其是我发现错误的地方。
索引.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>
控制器.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
});
};
});
创建.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
没有?
我试图在 create.html 中向正文div 添加ng-controller="AppCreateCtrl"
,但这引发了一个错误:"未知提供商:$modalInstanceProvider <- $modalInstance"所以那里没有运气。
在这一点上,我唯一的选择是用this.name
和this.groupType
传回一个对象,而不是使用$scope
,但这感觉是错误的。
当涉及嵌套作用域时,不要将<input>
直接绑定到作用域的成员:
<input ng-model="name" /> <!-- NO -->
将它们绑定到至少更深的级别:
<input ng-model="form.name" /> <!-- YES -->
原因是作用域原型继承其父作用域。因此,在设置第一级成员时,这些成员直接在子作用域上设置,而不会影响父级。与此相反,当绑定到嵌套字段 ( form.name
) 时,成员form
是从父作用域读取的,因此访问 name
属性会访问正确的目标。
在此处阅读更详细的说明。
我让我像这样工作:
var modalInstance = $modal.open({
templateUrl: 'partials/create.html',
controller: 'AppCreateCtrl',
scope: $scope // <-- I added this
});
没有表单名称,没有$parent
。我正在使用AngularUI Bootstrap版本0.12.1。
我被告知这个解决方案。
2014 年 11 月更新:
实际上,您的代码在升级到ui-bootstrap 0.12.0后应该可以工作。排除范围与控制器的范围合并,因此不再需要$parent
或form.
的东西。
在 0.12.0 之前:
模态使用嵌入来插入其内容。多亏了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
});
};
它对我有用范围:$scope谢谢杰森·斯威特
我添加范围:$scope然后它就可以工作了.凉
- setInterval游戏循环的范围问题
- firefox中的Javascript事件范围问题
- jQuery“this”范围问题
- 可以't在quizz页面范围问题上用最终分数更新变量
- JavaScript 函数变量范围问题
- 奇怪的可变范围问题
- AngularJS中的范围问题
- 如何在 JavaScript for D3.js 中解决这样的范围问题
- 我可以设置这个吗'某事'在该服务中动态创建的嵌套对象中的服务?(可能是范围问题)
- Angular.js的多个rest调用范围问题
- Angular-$http范围问题
- setTimeout范围问题
- NodeJS回调范围问题
- javascript函数的可变范围问题
- 可能存在Javascript范围问题
- 函数之间的Javascript变量范围问题
- 单击视图时的应用器范围问题
- 全球不断改变价值.可能通过引用或范围问题传递?帮助!链接中的详细示例
- 挖空 - 单击绑定到对象函数 - 范围问题
- Angular 在 http 请求后不更新页面(范围问题?