Tôi đang gặp khó khăn khi hiểu / sử dụng phạm vi cho phương thức giao diện người dùng góc cạnh.
Mặc dù không rõ ràng ngay lập tức ở đây, nhưng tôi có các mô-đun và mọi thứ được thiết lập chính xác (theo như tôi có thể nói), nhưng những mẫu mã này cụ thể là nơi tôi tìm thấy lỗi.
index.html (phần quan trọng của nó)
<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 (một lần nữa, phần quan trọng)
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 (toàn bộ)
<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>
Vì vậy, câu hỏi của tôi là: tại sao phạm vi không bị ràng buộc kép với giao diện người dùng? và tại sao thiscó các giá trị tùy chỉnh, nhưng $scopekhông có?
Tôi đã cố gắng thêm ng-controller="AppCreateCtrl"vào body div trong create.html, nhưng điều đó đã gây ra lỗi: "Nhà cung cấp không xác định: $ modalInstanceProvider <- $ modalInstance" nên không may mắn ở đó.
Tại thời điểm này, lựa chọn duy nhất của tôi là trả lại một đối tượng bằng this.namevà this.groupTypethay vì sử dụng $scope, nhưng điều đó cảm thấy sai.