Question

我创建了一个输入元素，并在点击后显示选择任何项目列表后的项目列表。隐藏。

但重点不在于它落下的元素，

所以我只想在单选按钮列表隐藏时手动设置焦点在输入元素上。

以下是使用以下代码

查看

 <label class="item item-input item-stacked-label" ng-click="showDays()">
            <span class="input-label black-text">DAYS</span>
            <span class="input-ctrl">
            <input type="text" id="days" readonly  ng-model="data_day" focus-on="!daysflag">
            </span>
 </label>
 <div ng-show="daysflag">
          <ion-radio icon="ion-ios-checkmark" ng-model="data_day" ng-value="{{day}}" ng-repeat="day in days" ng-click="hideDayFlag()">{{day}}</ion-radio>
 </div>

控制器

        $scope.days = [1, 2, 3, 4, 5, 6, 7];

        $scope.showDays = function() {
          $scope.daysflag = true;
        }
        $scope.hideDayFlag = function() {
          $scope.daysflag = false;
        }

指令

 .directive('focusOn',function($timeout) {
            return {
                restrict : 'A',
                link : function($scope,$element,$attr) {
                    $scope.$watch($attr.focusOn,function(_focusVal) {
                        $timeout(function() {
                            _focusVal ? $element[0].focus() :
                                $element[0].blur();
                        });
                    });
                }
            }
        });

请帮我解决这个问题。

Answer 1

使用函数scope.$watch是错误的。 scope.$watch用于跟踪$ scope中的更改。

详见explanation。

jsfiddle上的示例。

＆＃13;

angular.module('ExampleApp', [])
  .controller('ExampleController', function() {
    var vm = this;
    vm.isFocus = false;
  })
  .directive('focusOn', function() {
    return {
      restrict: 'A',
      scope: {
        focusOn: "="
      },
      link: function(scope, $element, $attr) {
        scope.$watch('focusOn', function(_focusVal) {
          _focusVal ? $element[0].focus() :
            $element[0].blur();
        });
        $element.on("focus", function() {
          scope.$applyAsync(function() {
            scope.focusOn = true;
          });
        });
        $element.on("blur", function() {

          scope.$applyAsync(function() {
            scope.focusOn = false;
          });
        })
      }
    }
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController as vm">
    <input ng-model="vm.countRow" focus-on="vm.isFocus">
    <input type="button" value="Focus" ng-click="vm.isFocus=true">
    <input type="button" value="Blur" ng-click="vm.isFocus=false">{{vm.isFocus}}
  </div>
</div>

＆＃13;

手动将焦点设置在角度js中的输入元素上

1 个答案: