일부 양식 컨트롤이있는 부트 스트랩 팝업 대화 상자가 있습니다. ng-model을 사용하여 바인딩 된 각 컨트롤. 대화 상자의 두 텍스트 상자에 대화 상자가 열릴 때 jquery를 사용하여 값을 설정하고 나머지 두 개는 사용자가 편집 할 수 있습니다. ng-model을 위해 사용자가 편집 할 수있는 두 가지가 잘 작동합니다. 그러나 다른 사람들에게는 그렇지 않습니다. 내가 직접 값을 변경하면 제대로 작동합니다. 그러나 jQuery를 사용하여 값을 설정할 때는 아닙니다. jquery를 사용하여 값을 설정해야합니다. 지난 며칠 동안 어려움을 겪고 있습니다. 어떤 도움을 주시면 감사하겠습니다. 내 코드는 다음과 같습니다.
<body ng-app="my-app" ng-controller="Ctrl">
<div class="container">
<h3>Modal Example</h3>
<!-- Button to trigger modal -->
<div>
<a href="#contactUser" role="button" class="btn" data-toggle="modal">Launch Modal</a>
</div>
<!-- Modal -->
<div id="contactUser" class="modal fade openDilog" role="dialog">
<div id="emailform" class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span class="glyphicon glyphicon-envelope"></span>Contact User</h4>
</div>
<div class="modal-body ">
<div class="form-group row">
<label class="control-label col-sm-2" for="subject">Email:</label>
<div class="col-sm-10">
<input type="email" ng-model="email" class="form-control" id="email" placeholder="Enter Subject" />
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="username">UserName:</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="username" id="username" name="username" placeholder="Enter UserName" />
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="subject">Subject:</label>
<div class="col-sm-10">
<input type="text" class="form-control" required ng-model="subject" id="subject" placeholder="Enter Subject" />
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="message">Message:</label>
<div class="col-sm-10">
<textarea rows="5" class="form-control" required ng-model="message" id="message" placeholder="Message Goes Here"></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-6">
<button type="submit" ng-click="Contact()" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
자바 스크립트
$('.openDilog').on('show.bs.modal', function (e) {
$(e.currentTarget).find('input[type="email"]').val('[email protected]');
$(e.currentTarget).find('input[name="username"]').val('username');
});
var app = angular.module('my-app', []);
app.controller('Ctrl', function($scope){
$scope.Contact = function() {
console.log($scope.email);
console.log($scope.subject);
console.log($scope.message);
console.log($scope.username);
}
});
여기에 문제를 위해 만든 바이올린이 있습니다.
scope외부 컨트롤러에서 액세스 하여 이를 수행 할 수 있습니다 .
HTML : 그냥 추가 id로 속성을 HTML. 예->id='outer'
<body ng-app="my-app" ng-controller="Ctrl" id='outer'>
자바 스크립트 :
$('.openDilog').on('show.bs.modal', function (e) {
var scope = angular.element($("#outer")).scope();
scope.$apply(function(){
scope.email = '[email protected]';
scope.username = 'username';
});
});
문제가 해결되기를 바랍니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다