javascript - AngularJS Material 如何将文本字段设置为提示对话框的密码？

Question

我正在使用 AngularJS Material 库，我正在尝试弹出一个提示对话框，让用户输入密码。

该对话框工作正常，但问题是文本字段不是“密码”类型，并且密码可见。

有什么方法可以使文本字段设置为密码类型吗？或者唯一的方法是制作自定义对话框？

这是来自 AngularJS Material 网站的示例:

$scope.showPrompt = function(ev) {
// Appending dialog to document.body to cover sidenav in docs app
var confirm = $mdDialog.prompt()
  .title('What would you name your dog?')
  .textContent('Bowser is a common name.')
  .placeholder('Dog name')
  .ariaLabel('Dog name')
  .initialValue('Buddy')
  .targetEvent(ev)
  .required(true)
  .ok('Okay!')
  .cancel('I\'m a cat person');

$mdDialog.show(confirm).then(function(result) {
  $scope.status = 'You decided to name your dog ' + result + '.';
}, function() {
  $scope.status = 'You didn\'t name your dog.';
});
};

https://material.angularjs.org/latest/demo/dialog

谢谢。

Answer 1

提示是一个预制对话框，您需要使用自定义对话框

 $scope.showAdvanced = function() 
{
    $mdDialog.show({
      controller: DialogController,
      templateUrl: './html/dialog1.tmpl.html', //custom template to load on the dialog
      parent: angular.element(document.body),
      clickOutsideToClose:true,
      fullscreen: $scope.customFullscreen // Only for -xs, -sm breakpoints.
    })
    .then(function(answer) {
      $scope.status = 'You said the information was "' + answer + '".';
    }, function() {
      //close the dialog
    });
};

对话框 Controller

 function DialogController($scope, $mdDialog) {
    $scope.hide = function() {
      $mdDialog.hide();
    };

    $scope.cancel = function() {
      $mdDialog.cancel();
    };

    $scope.answer = function(answer) {
      $mdDialog.hide(answer);
    }
  } // dialog controller end

在模板内，您只需添加所需的代码

 <md-input-container style="margin-top:50px">
    <label style="border-color: white; color: white; text-align:left;">Contraseña</label>
        <input type="password" name="pass" ng-model="pass" required md-no-asterisk >
               <div ng-messages="ingresoForm.pass.$error">
               <div ng-message="required">Este campo es requerido</div>
        </div>

 </md-input-container>

最后调用你的对话框

$scope.showAdvanced();

您可以在此处找到整个文档: https://material.angularjs.org/latest/demo/dialog

您好!