[英]UI Bootstrap Modal promise and controller scope
I'm new to AngularJS and using UI Bootstrap in a project. 我是AngularJS的新手,在项目中使用UI Bootstrap。 I want to mark an I've read the T&Cs checkbox as checked once the modal (containing the T&Cs text) is closed (but not when the modal is dismissed).
我想标记一个模型(包含T&C文本)被关闭后, 我已经读过T&Cs复选框(但是当模态被解除时)。
I've adapted the general example at https://angular-ui.github.io/bootstrap/ but having issues updating the scope / view with the value of $scope.accept_terms. 我已经在https://angular-ui.github.io/bootstrap/上修改了一般示例,但是在使用$ scope.accept_terms的值更新范围/视图时出现问题。
I have the modal opening / closing fine, but the checkbox always remains unchecked. 我的模态打开/关闭很好,但复选框始终保持未选中状态。
HTML: 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: 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);
};
});
Can anyone point me in the right direction? 谁能指出我正确的方向?
Turns out this was a simple matter of using ng-model on the checkbox instead of ng-checked: 事实证明这是一个简单的问题,在复选框上使用ng-model而不是ng-checked:
Controller: 控制器:
modalInstance.result.then(function (result) {
$scope.accept_terms = true;
}, function () {
});
Markup: 标记:
<input type="checkbox" id="user_details_termsConditions"
name="user_details[termsConditions]" required="required"
ng-model="accept_terms" value="1" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.