Текстовое поле автофокуса в диалоговом окне Angular Material Dialog не работает

В веб-приложении я использую Dialog of Angular Material. Он содержит только текстовое поле, изначально пустое. Я хочу автоматически сфокусироваться на текстовом поле, когда пользователь открывает модальный диалог. Как я могу сделать? Это мой код, но он не работает. Я также сделал директиву, но она еще не работает.

Html модального диалога:

<md-dialog-content>
    <div class="md-dialog-content">
       <md-input-container>
          <label>My textarea</label>            
            <textarea ng-model="myText" md-maxlength="5000" auto-focus></textarea>
       </md-input-container>
    </div>
</md-dialog-content>

Директива автофокуса:

angular.module('app').directive("autoFocus", function($timeout) {
  return {
    restrict: 'AC',
    link: function(_scope, _element) {
        $timeout(function(){
            _element[0].focus();
        }, 0);
    }
  };
})

Это конфигурация диалога в контроллере:

 $mdDialog.show({
                    controller:texateaController,
                    templateUrl: 'texatea.html',
                    parent: angular.element(document.body),
                    targetEvent: event,
                    clickOutsideToClose: false
                    }
                })

javascript angularjs angular-material mddialog
person panagulis72    schedule 09.09.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вот один из способов сделать это — CodePen.

Разметка

<div ng-controller="MyController as vm" class="md-padding" ng-cloak="" ng-app="app">
   <md-button class="md-primary md-raised" ng-click="vm.show($event)">Open</md-button>
</div>

JS

angular.module('app',['ngMaterial'])

  // Inspired by Mark Rajcok'a answer - http://stackoverflow.com/a/14837021/782358
  .directive('autoFocus', function($timeout) {
    return {
      scope: { trigger: '@autoFocus' },
      link: function(scope, element) {
        scope.$watch('trigger', function(value) {
          if (value.toString() === "true") {
            $timeout(function() {
              element[0].focus();
            });
          }
        });
      }
    };
  })

.controller('MyController', function($scope, $mdDialog) {
  this.show = function(ev) {
    $mdDialog.show({
      restrict: 'E',
      template:"<div><md-input-container><textarea auto-focus='true'></textarea></md-input-container></div>" ,
      parent: angular.element(document.body),
      clickOutsideToClose:true,
      targetEvent: ev
    });
  };
});
person camden_kid    schedule 09.09.2016