我正在使用AngularJS材质模态窗口从用户输入中获取数据。
Index.cshtml
调用函数js showAdvanced()
。 showAdvanced()
invokin templateUrl: 'Template/Test.html',
包含带输入的字段。主要问题是为什么<input ng-model="user.password" type="password" />
中的Test.html
不会更改$scope.user = { email: 'your@mail.com', password: '' };
中的密码值。
HomeComtroller:
namespace Modal.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
[HttpPost]
public void Login(string email,string password)
{
Console.WriteLine(email);
}
}
}
Index.cshtml
@{
ViewBag.Title = "Index";
}
<link href="~/Content/Custom.css" rel="stylesheet" />
<link href="https://material.angularjs.org/1.0.8/docs.css" rel="stylesheet"/>
<link href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.0.8/angular-material.css" rel="stylesheet" />
<script src="~/Scripts/angular-material/angular-material.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-animate/angular-animate.js"></script>
<script src="~/Scripts/angular-aria/angular-aria.js"></script>
<script src="~/Scripts/angular-messages.js"></script>
<script src="~/Scripts/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.0.8/angular-material.js"></script>
<script src="~/Scripts/Modal.js"></script>
<div ng-controller="AppCtrl" class="md-padding dialogdemoBasicUsage" id="popupContainer" ng-cloak="" ng-app="MyApp">
<div class="dialog-demo-content" layout="row" ayout="row" layout-wrap="" layout-margin="" layout-align="center">
<md-button class="md-primary md-raised" ng-click="showAdvanced($event)">
Custom Dialog
</md-button>
</div>
<script type="text/ng-template" id="Test.html">
<md-input-container>
<label>Email</label>
<input ng-model="status" type="email">
</md-input-container>
<md-input-container>
<label>Password</label>
<input ng-model="user.password" type="password" />
</md-input-container>
<table>
<tbody>
<tr>
<td>
<md-button ng-click="answer('not useful')">
Go
</md-button>
</td>
<td>
<md-button ng-click="answer('useful')" style="margin-right:20px;">
Cancel
</md-button>
</td>
</tr>
</tbody>
</table>
</script>
</div>
的JavaScript
angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('AppCtrl', function($scope, $mdDialog, $mdMedia,$http) {
$scope.status = ' ';
$scope.customFullscreen = $mdMedia('xs') || $mdMedia('sm');
$scope.user = { email: 'your@mail.com', password: '' };
$scope.showAdvanced = function(ev) {
var useFullScreen = ($mdMedia('sm') || $mdMedia('xs')) && $scope.customFullscreen;
$mdDialog.show({
controller: DialogController,
templateUrl: 'Template/Test.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose:true,
fullscreen: useFullScreen
})
.then(function (answer) {
$http({
method: 'POST',
url: 'Home/Login',
data: JSON.stringify({ email: $scope.user.email ,password: $scope.user.password })
});
}, function() {
$scope.status = 'You cancelled the dialog.';
});
$scope.$watch(function() {
return $mdMedia('xs') || $mdMedia('sm');
}, function(wantsFullScreen) {
$scope.customFullscreen = (wantsFullScreen === true);
});
};
});
function DialogController($scope, $mdDialog) {
$scope.hide = function() {
$mdDialog.hide();
};
$scope.cancel = function() {
$mdDialog.cancel();
};
$scope.answer = function(answer) {
$mdDialog.hide(answer);
};
}