Javascript 为什么我在模态中的窗体操作未更新?
我正在使用AngularJs中的模态形式。我必须根据表格中输入的内容发送不同的请求。我想更改表单的操作url。我想要一个计算url。当我打开模式文件时,我的url不会在表单操作中更新。为什么?怎么了 这是密码Javascript 为什么我在模态中的窗体操作未更新?,javascript,angularjs,forms,twitter-bootstrap,Javascript,Angularjs,Forms,Twitter Bootstrap,我正在使用AngularJs中的模态形式。我必须根据表格中输入的内容发送不同的请求。我想更改表单的操作url。我想要一个计算url。当我打开模式文件时,我的url不会在表单操作中更新。为什么?怎么了 这是密码 <script> angular.module('plunker', ['ui.bootstrap']); var url = '/url/test'; // this value is calculated var ModalDemoCtrl
<script>
angular.module('plunker', ['ui.bootstrap']);
var url = '/url/test'; // this value is calculated
var ModalDemoCtrl = function ($scope, $modal, $log) {
/* Note: The hard coded user object has been commented out, as
it is now passed as an object parameter from the HTML template.
*/
/* $scope.user = {
user: 'name',
password: null
};*/
$scope.open = function (user) {
$scope.user = user;
$modal.open({
templateUrl: 'myModalContent.html',
backdrop: true,
windowClass: 'modal',
controller: function ($scope, $modalInstance, $log, user) {
$scope.user = user;
$scope.submit = function () {
$log.log('Submiting user info.');
$log.log(JSON.stringify(user));
$modalInstance.dismiss('cancel');
}
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {
user: function () {
return $scope.user;
}
}
});
};
};
</script>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<!--HERE I WANT TO CHANGE THE ACTION URL ACCORDING TO THE USER -->
<form action="{{'/app/'+url}}" ng-submit="submit()">
<div class="modal-body">
<label>User name</label>
<input type="text" ng-model="user.user" />
<label>Password</label>
<input type="password" ng-model="user.password" />
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
<input type="submit" class="btn primary-btn" value="Submit" />
</div>
</form>
</script>
<button class="btn" ng-click="open({user: 'username', password: 'password'})">Open me!</button>
<div ng-show="user.password">Got back from modal: {{ user | json}}</div>
</div>
angular.module('plunker',['ui.bootstrap']);
var url='/url/test';//这个值是计算出来的
var ModalDemoCtrl=函数($scope、$modal、$log){
/*注意:硬编码的用户对象已被注释掉,如下所示
它现在作为一个对象参数从HTML模板传递。
*/
/*$scope.user={
用户:“名称”,
密码:null
};*/
$scope.open=函数(用户){
$scope.user=用户;
$modal.open({
templateUrl:'myModalContent.html',
背景:没错,
windowClass:“模态”,
控制器:函数($scope、$modalInstance、$log、user){
$scope.user=用户;
$scope.submit=函数(){
$log.log('提交用户信息');
$log.log(JSON.stringify(user));
$modalInstance.disclose('cancel');
}
$scope.cancel=函数(){
$modalInstance.disclose('cancel');
};
},
决心:{
用户:函数(){
返回$scope.user;
}
}
});
};
};
我是模态的!
用户名
密码
取消
打开我!
已从模式返回:{user | json}
这是一个(第57行)
谢谢您没有在
modelDemoCtrl
请看这里的工作演示
模板:
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
<p>Your Url: <strong>{{url.user}}</strong></p>
</div>
<!--HERE I WANT TO CHANGE THE ACTION URL ACCORDING TO THE USER -->
<form action="{{'/app/'+url.user}}" ng-submit="submit()">
<div class="modal-body">
<label>User name</label>
<input type="text" ng-model="user.user" />
<label>Password</label>
<input type="password" ng-model="user.password" />
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
<input type="submit" class="btn primary-btn" value="Submit" />
</div>
</form>
</script>
$scope.open = function (user) {
$scope.user = user;
$modal.open({
templateUrl: 'myModalContent.html',
backdrop: true,
windowClass: 'modal',
controller: function ($scope, $modalInstance, $log, user) {
$scope.user = user;
$scope.url = $scope.user;
$scope.submit = function () {
$log.log('Submiting user info.');
$log.log(JSON.stringify(user));
$modalInstance.dismiss('cancel');
}
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {
user: function () {
return $scope.user;
}
}
});
};
是的,你是对的,我必须用“resolve”传递用户信息,在控制器中传递它,并在我的控制器中定义$scope.user变量,并影响此变量的用户。谢谢回答