我是 AngularJS 新手，并且在项目中使用 UI Bootstrap。我想在模态(包含 T&C 文本)关闭后(但在模态关闭时不这样做)将我已阅读 T&C 复选框标记为选中状态。
我已经改编了 https://angular-ui.github.io/bootstrap/ 处的一般示例但在使用 $scope.accept_terms 的值更新范围/ View 时遇到问题。
我的模式打开/关闭很好，但该复选框始终保持未选中状态。
HTML:
<form>
<div class="checkbox">
<input type="checkbox" id="user_details_termsConditions"
name="user_details[termsConditions]"
required="required" ng-checked="accept_terms" />
<label for="user_details_termsConditions" >I agree to the <a href="" ng-click="$ctrl.open('', '.modal-container')">terms and conditions</a></label>
</div>
</form>
JS:
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($uibModal, $log, $document, $scope) {
var $ctrl = this;
$ctrl.animationsEnabled = true;
$ctrl.open = function (size, parentSelector) {
var parentElem = parentSelector ?
angular.element($document[0].querySelector('.container ' + parentSelector)) : undefined;
var modalInstance = $uibModal.open({
animation: $ctrl.animationsEnabled,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
controllerAs: '$ctrl',
size: size,
appendTo: parentElem
});
modalInstance.result.then(function (result) {
$scope.accept_terms = result;
$log.info('accept_terms = ' + $scope.accept_terms);
// prints accept_terms = 1
}, function () {
});
};
});
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($uibModalInstance) {
var $ctrl = this;
$ctrl.ok = function () {
$uibModalInstance.close(true);
};
});
有人能指出我正确的方向吗？
最佳答案
事实证明，这是在复选框上使用 ng-model 而不是 ng-checked 的简单问题:
Controller :
modalInstance.result.then(function (result) {
$scope.accept_terms = true;
}, function () {
});
标记:
<input type="checkbox" id="user_details_termsConditions"
name="user_details[termsConditions]" required="required"
ng-model="accept_terms" value="1" />
关于javascript - UI Bootstrap Modal promise 和 Controller 范围，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42176912/