Angularjs 条件焦点

我有这个指示：

(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.NETMVC。现在，在编辑和新模式中，我有第二个控件。我不知道如何使这个焦点有条件。

嗯，我以前写过一个指令，在该指令中，当事件被触发时，它接受事件和要聚焦的元素id

是这样的（）：

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（可能的实现）

指令

  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();
        });
      });
    };
  })

---

这是我目前的实施，似乎是工作！需要进行更多测试：

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 />

---

表格按我的要求工作。我将测试更多的表单，以确保此更改不会破坏任何内容。

如何触发

编辑模式

和

新行

？是单击按钮吗？我们从网格视图开始，双击网格中的一行，以编辑模式打开表单（或单击编辑按钮）。对于新行，单击“新建”按钮。isNew变量告知它是新行还是现有行。在ng disabled指令中，我们使用“！isNew”（因此在编辑模式下它被禁用）谢谢。我在想一个稍微不同的方法。我在想，是否可以在当前指令中添加一个可选参数来关闭它？在这种情况下，我们仍然可以使用sm focus，就像我现在使用的一样，但是没有focus属性？您认为指令中有可能有这样额外的可选参数吗？你能用这种方式帮我实施吗？再次感谢你的帮助。我认为你的解决方案仍然不是我想要的。本指令在我们的应用程序中以多种形式使用。我希望我的零钱尽可能少。这是我到目前为止没有工作的尝试：link:function（scope，element）{var noFocus=angular.isDefined（element[0].noFocus）？element[0]。noFocus:false；console.log（'noFocus='+noFocus）if（！noFocus）{scope.$on（'sm:focus'，function（）{$timeout（function（）{element[0]。Focushower，我在控制台窗口中看到false，因此它不起作用。我希望我的更改尽可能不引人注目。我正在以以下形式使用此代码：您知道如何使我的想法起作用吗？我想我明白了！在您的声明中使用idea from“我希望我的改变尽可能不引人注目"我所做的只是简单地说，添加一个

no focus

属性在本质上已经很突出了。此外，当您没有任何指标时，您将如何确定哪个

sm focus

元素是要关注的目标？您是否尝试添加一个元素，随后进行编辑，然后添加另一个？看看它是否有效？同意。以这种形式2个元素当前具有sm焦点。在其他形式中，只有一个输入元素具有该属性。我认为我可以接受该实现，因为指令使用或不使用该可选属性。顺便说一句，我不确定我是否理解您的评论？

 <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 />