Angular UI 模式的范围问题 [英] Scope issues with Angular UI modal
问题描述
我无法理解/使用角度 UI 模式的范围.
虽然在这里不是很明显，但我已经正确设置了模块和所有内容(据我所知)，但这些代码示例尤其是我发现错误的地方.
index.html(它的重要部分)
<button class="btn dropdown-toggle btn-mini" data-toggle="dropdown">行动<span class="caret"></span><ul class="dropdown-menu pull-right text-left"><li><a ng-click="addSimpleGroup()">添加简单</a></li><li><a ng-click="open()">添加自定义</a></li><li class="divider"></li><li><a ng-click="doBulkDelete()">删除所选内容</a></li>Controller.js(再次，重要的部分)
MyApp.controller('AppListCtrl', function($scope, $modal){$scope.name = '新名称';$scope.groupType = '新类型';$scope.open = function(){var modalInstance = $modal.open({templateUrl: 'partials/create.html',控制器:'AppCreateCtrl'});modalInstance.result.then(函数(响应){//输出一个对象 {name: 'Custom Name', groupType: 'Custom Type'}//尽管用户输入了自定义值console.log('响应', 响应);//输出新名称"，这很好，对我来说很有意义.console.log('name', $scope.name);});};});MyApp.controller('AppCreateCtrl', function($scope, $modalInstance){$scope.name = '自定义名称';$scope.groupType = '自定义类型';$scope.ok = function(){//尽管用户输入了TEST 1"，但仍输出自定义名称"console.log('创建名称', $scope.name);//尽管用户输入了TEST 2"，但仍输出自定义类型"console.log('创建类型', $scope.groupType);//输出 AppCreateCtrl 的 $scope 但名称和 groupType//仍然显示为自定义名称"和自定义类型"//$scope.$id 是 "007"console.log('scope', $scope);//输出看起来像范围的东西，但在这个对象中//name 和 groupType 的值按预期是TEST 1"和TEST 2".//this.$id 设置为 "009" 所以 this != $scopeconsole.log('this', this);//基于 modalInstance.result.then() 所说的，//此对象中的值是原始 $scope 的值//不是用户刚刚在 UI 中输入的那些.没有数据绑定?$modalInstance.close({名称:$scope.name，组类型:$scope.groupType});};});create.html(完整)
<button type="button" class="close" ng-click="cancel()">x</button><h3 id="myModalLabel">添加模板组</h3><div class="modal-body"><表格><字段集><label for="name">组名:</label><input type="text" name="name" ng-model="name"/><label for="groupType">组类型:</label><input type="text" name="groupType" ng-model="groupType"/></fieldset></表单>
<div class="modal-footer"><button class="btn" ng-click="cancel()">取消</button><button class="btn btn-primary" ng-click="ok()">添加</button>
所以，我的问题是:为什么范围没有被双重绑定到 UI?为什么 this 有自定义值，而 $scope 没有?
我尝试将 ng-controller="AppCreateCtrl" 添加到 create.html 中的 body div，但这引发了一个错误:Unknown provider: $modalInstanceProvider <- $modalInstance"所以没有运气.
此时，我唯一的选择是使用 this.name 和 this.groupType 传回一个对象，而不是使用 $scope，但感觉不对.
我的工作如下:
var modalInstance = $modal.open({templateUrl: 'partials/create.html',控制器:'AppCreateCtrl'，scope: $scope//<-- 我添加了这个});没有表单名称，没有$parent.我使用的是 AngularUI Bootstrap 版本 0.12.1.
我通过这个向我透露了这个解决方案.
I'm having trouble understanding/using the scopes for an angular UI modal.
While not immediately apparent here, I have the modules and everything set up correctly (as far as I can tell), but these code samples in particular are where I'm finding the bug.
index.html (the important part of it)
<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 (again, the important part)
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 (in its entirety)
<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>
So, my question stands: why is the scope not being double-bound to the UI? and why does this have the customized values, but $scope does not?
I have tried to add ng-controller="AppCreateCtrl" to the body div in create.html, but that threw an error: "Unknown provider: $modalInstanceProvider <- $modalInstance" so no luck there.
At this point, my only option is to pass back an object with this.name and this.groupType instead of using $scope, but that feels wrong.
I got mine to work like this:
var modalInstance = $modal.open({
templateUrl: 'partials/create.html',
controller: 'AppCreateCtrl',
scope: $scope // <-- I added this
});
No form name, no $parent. I'm using AngularUI Bootstrap version 0.12.1.
I was tipped off to this solution by this.
这篇关于Angular UI 模式的范围问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
