UI Bootstrap模态承诺和控制器范围

我是AngularJS的新手，在项目中使用UI Bootstrap。我想标记一个我已经阅读了T & Cs复选框，只要模态（包含T & Cs文本）关闭（但不在模态被解除时）就选中。UI Bootstrap模态承诺和控制器范围

我修改了https://angular-ui.github.io/bootstrap/的一般示例，但遇到了使用$ scope.accept_terms的值更新范围/视图的问题。

我有模式打开/关闭罚款，但复选框始终未选中。

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); 
    }; 
});

任何人都可以点我在正确的方向？

来源

2017-02-11 Richard

输入元件需要一个[ng-model指令]（https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D） – georgeawg

谢谢你，那就是诀窍！我摆脱了ng检查，并用ng-model取代:-)。 – Richard

原来，这是使用上的复选框而不是NG-检查NG-模型的一个简单的事情：

控制器：

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" />

来源

2017-02-12 15:22:14 Richard

UI Bootstrap模态承诺和控制器范围

回答

相关问题