Question

我有这个指令：

(function () {
    'use strict';

    var app = angular.module('myAppName');

    app.directive('smFocus', [ '$timeout', function ($timeout) {
        return {
            restrict: 'A',            
            link: function (scope, element) {

                scope.$on('sm:focus', function () {
                    $timeout(function() {
                        element[0].focus();
                    }, 10);
                });
            }
        };
    }]);
})();

我也有这两个控件：

<input type="text"
                               name="nickname"
                               id="nickname"
                               ng-model="currentDynamicRule.nickname"
                               class="form-control"
                               ng-disabled="!isNew"
                               placeholder="Nickname"
                               required
                               ng-maxlength="10"
                               sm-focus />

和另一个

 <input type="text" name="descrip" id="descrip" ng-model="currentDynamicRule.descrip" class="form-control"
                           placeholder="Description" required ng-maxlength="30"
                           sm-focus />

因此，只有当第一个控件是新行时才启用两个控件（在编辑模式下禁用）。我希望第一个控件在它是新记录时聚焦，第二个控件在编辑模式时聚焦。

我正在使用ASP.NET MVC。现在在编辑模式和新模式中我都专注于第二个控件。我不确定如何使这个焦点有条件。

Answer 1

嗯我之前写了一个指令，其中它接受一个事件和一个元素id，以便在触发该事件时集中注意力。

就是这样（ Plunker DEMO ）：

<强> JAVASCRIPT

  .directive('eventFocus', function($timeout) {
    return function(scope, elem, attr) {
      elem.on(attr.eventFocus, function() {
        // timeout makes sure that is invoked after any other event has been triggered.
        // e.g. click events that need to run before the focus or
        // inputs elements that are in a disabled state but are enabled when those events
        // are triggered.
        $timeout(function() {
          var element = document.getElementById(attr.eventFocusId);
          if(element)
            element.focus();
        });
      });

      scope.$on('$destroy', function() {
        element.off(attr.eventFocus);
      });
    };
  })

HTML （可能的实施）

<input type="text" id="pet-desc" ng-model="pet.desc">
<button type="button" event-focus="click" event-focus-id="pet-desc">Edit</button

单击“编辑”按钮时，将重点输入id =“pet-desc”。

<强>更新要确定哪个sm-focus元素是sm:focus事件的目标，您可以在$rootScope.$broadcast()中添加一个参数（要关注的元素的ID）。的 See this PLUNKER

e.g。

<强>控制器

$rotoScope.$broadcast('sm:focus', 'pet-id');

<强>指令

directive('smFocus', function($timeout) { return function(scope, elem, attr) { scope.$on('sm:focus', function(event, id) { $timeout(function() { if(attr.id == id) elem[0].focus(); }); }); }; })

Answer 2

这是我目前的实施似乎正在发挥作用！需要测试更多：

app.directive('smFocus', [ '$timeout', function ($timeout) {
        return {
            restrict: 'A',
            scope: {
                noFocus: "=?"
            },
            link: function (scope, element) {
                var noFocus = angular.isDefined(scope.noFocus) ? scope.noFocus : false;
               // console.log('noFocus=' + noFocus)
                if (!noFocus) {
                    scope.$on('sm:focus', function () {
                        $timeout(function () {
                            element[0].focus();
                        }, 10);
                    });
                }
            }
        };

我的表单控件是：

 <input type="text"
                           name="nickname"
                           id="nickname"
                           ng-model="currentDynamicRule.nickname"
                           class="form-control"
                           ng-disabled="!isNew"
                           placeholder="Nickname"
                           required
                           ng-maxlength="10"
                           no-focus="!isNew"
                           sm-focus />

类似的描述：

 <input type="text" name="descrip" id="descrip" ng-model="currentDynamicRule.descrip" class="form-control"
                           placeholder="Description" required ng-maxlength="30"
                           no-focus="isNew"
                           sm-focus />

表格按我的意愿运作。我将测试更多的表格，以确保这一改变没有破坏任何东西。

有条件的焦点

2 个答案: