Question

我有这个有输入的md对话框。当我单击自上而下按钮时，我正在传递输入模型，但是在我的控制器上，它是未定义的。

<md-dialog aria-label="Top Up User" ng-cloak>
  <md-dialog-content>
    <div class="md-dialog-content">
      <form>
        <md-input-container class="md-block">
                <label>Amount</label>
                <input required type="number" name="amount" ng-model="topup.amount" min="1"
                ng-pattern="/^1234$/" />
        </md-input-container>

        <md-dialog-actions layout="row" ng-show="!vm.loading">

            <md-button ng-click="vm.closeDialog()">
             Cancel
            </md-button>
            <md-button ng-click="vm.topUp(topup.amount)" style="margin-right:20px;">
              Top Up
            </md-button>
          </md-dialog-actions>

          <div layout="row" layout-align="space-around">
            <md-progress-circular md-mode="indeterminate" ng-show="vm.loading"></md-progress-circular>
          </div>
      </form>
    </div>
  </md-dialog-content>
</md-dialog>

控制器：

(function(){

  angular
       .module('app')
       .controller('MainController', [
          'navService', '$mdSidenav', '$mdDialog', '$log', '$q', '$state', '$mdToast', 'Pubnub', 'mongolabService', '$scope',
          MainController
       ]);

  function MainController(navService, $mdSidenav, $mdDialog, $log, $q, $state, $mdToast, Pubnub, mongolabService, $scope) {

    var vm = this;

    function showActions($event) {
      var self = this;

      $mdDialog.show({
        controller: [ '$mdDialog', TopUpController],
        controllerAs: 'vm',
        templateUrl: 'app/views/partials/topup.html',
        targetEvent: $event,
        bindToController : true,
        clickOutsideToClose:true
      });

        function TopUpController () {
          var vm = this;
          vm.topUp = topUp;
          vm.loading = false;
          vm.closeDialog = closeDialog;
          function closeDialog() {
            $mdDialog.hide();
          }
          function querySearch (query) {
            return query ? $scope.users.filter( createFilterFor(query) ) : $scope.users;
          }

          function topUp(amount) {

            var topUpCallback = {
              error: function(response){
                vm.loading = false;
                showSimpleToast("Error occurred");
                console.log(response);
              }, success: function(response){
                showSimpleToast("Top up success");
              }
            }
            //Amount is undefined
            showSimpleToast("amount: " + amount);
          }

        }
    }

    function showSimpleToast(title) {
      $mdToast.show(
        $mdToast.simple()
          .content(title)
          .hideDelay(2000)
          .position('bottom right')
      );
    }
  }

})();

Answer 1

奇怪。改变

showSimpleToast("amount: " + amount);

到

showSimpleToast("amount: " + vm.amount);

让我们看看会发生什么

Answer 2

你能否改变你使用这样的topup属性的方式（仅适用于1个样式编码vm / $ scope）：在输入

<input required type="number" name="amount" ng-model="vm.topup.amount" min="1" ...

按钮：

<md-button ng-click="vm.topUp(topup.amount)" style="margin-right:20px;">

控制器中的init topup对象：

vm.topup = {amount: ''};

我认为问题是你在使用其amount属性

之前没有初始化你的topup对象

Answer 3

我注意到当输入输入时，数量只是未定义。我将allowInvalid添加到<input>并且它有效。

ng-model-options="{allowInvalid: true}"

无法从md-input获取输入值

3 个答案: