각도 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에서 body div에 추가하려고했지만 "Unknown provider : $ modalInstanceProvider <-$ modalInstance"라는 오류가 발생했습니다.
이 시점에서, 내 유일한 옵션은 함께 객체를 다시 전달하는 것입니다 this.name및 this.groupType사용하는 대신 $scope,하지만 그건 잘못된 생각한다.