1

私はAngularJSに新たなんだと、プロジェクトでUIブートストラップを使用。私は(T & Csのテキストを含む)(モーダルが却下されたときではなく)クローズされるモーダル一度チェックしてT &のCsチェックボックスを読んだをマークします。UIブートストラップモーダル約束とコントローラの範囲

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

誰もが正しい方向に私を指すことができますか?

+1

入力要素のニーズ[NG-モデルディレクティブ](https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D) – georgeawg

+0

お礼、トリックをやりました!私はng-checkedを取り除き、ng-modelに置き換えました:-)。 – Richard

答えて

0

これは代わりに、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" /> 
関連する問題