Question

我的ng-focus指令。

编辑：我被告知现有核心ng-focus。因为我对角度很新，所以我不认为ng-focus是一种选择。如下图所示。它也不起作用

var ngControlMod = angular.module('ngControlModule', []);
ngControlMod.directive('ngFocus', function ($timeout) {
    return {
        link: function (scope, element, attrs) {
            scope.$watch(attrs.ngFocus, function (val) {
                if (angular.isDefined(val) && val) {
                    $timeout(function () { element[0].focus(); });
                }
            }, true);

            element.bind('blur', function () {
                if (angular.isDefined(attrs.ngFocusLost)) {
                    scope.$apply(attrs.ngFocusLost);
                }
            });
        }
    };
});

以下是我在视图中使用的方式

<table id="tblMyTable" class="table table-bordered table-striped table-hover table-condensed">
    <thead>
        <tr>
            <th>My Dropdown</th>
            <th>My Date</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="ca in myList">
            <td>
                <select name="select_{{ca.ID}}" ng-model="ca.List" 
                ng-options="corr as corr.caText for corr in caList track by corr.caValue"
                ng-change="GetData(ca, ca.List)">
                    <option value="">--Select--</option>
                </select>
            </td>
            <td>
                <input name="Date_{{ca.ID}}" ng-focus="isFocus_{{ca.ID}}" 
                date-picker="" ng-model="ca.caDate"
                placeholder="MM/DD/YYYY" />
            </td>
        </tr>
     </tbody>
 </table>

这个想法是，如果用户在下拉列表中选择一个选项，焦点应该自动移动到该行中的日期。为了实现这一点，我在表行和控制器中的html控件的属性“name”中添加了一个ID作为标识符

$scope.GetData= function (ca, Selected) {
    var propName = "isFocus_" + ca.ID;
    $scope[propName] = true;
}

在所有编码之后，结果不一致。它有时会起作用，有时甚至起作用。我无法弄清楚原因。我也收到此错误

angular.js:14700 Error: [$parse:syntax] Syntax Error: Token '{' is an 
unexpected token at column 9 of the expression [isFocus_{{ca.QuesID}}] 
starting at [{{ca.QuesID}}].
http://errors.angularjs.org/1.6.6/$parse/syntax?p0=%7B&p1=is%20an%20unexpected%20token&p2=9&p3=isFocus_%7B%7Bca.QuesID%7D%7D&p4=%7B%7Bca.QuesID%7D%7D
at angular.js:116
at AST.throwError (angular.js:15258)
at AST.ast (angular.js:15008)
at Parser.parse (angular.js:16350)
at $parse (angular.js:16496)
at Object.compile (angular.js:27337)
at applyDirectivesToNode (angular.js:9737)
at compileNodes (angular.js:9097)
at compileNodes (angular.js:9109)
at compileNodes (angular.js:9109) "<input name="Date_{{ca.ID}}" ng-focus="isFocus_{{ca.ID}}" date-picker="" ng-model="ca.caDate" placeholder="MM/DD/YYYY" />"

Answer 1

请注意，添加自定义ng-focus指令不会替换现有核心ng-focus。 $compile service将实例化新的自定义指令和现有的核心ng-focus directive。

避免对自定义指令使用ng-前缀。 ng-前缀保留给核心指令。有关详细信息，请参阅AngularJS Wiki - Best Practices。

<input name="Date_{{ca.ID}}"  ̶n̶g̶-̶f̶o̶c̶u̶s̶=̶"̶i̶s̶F̶o̶c̶u̶s̶_̶{̶{̶c̶a̶.̶I̶D̶}̶}̶"̶
  ng-focus="'isFocus_'+ca.ID" 
  date-picker="" ng-model="ca.caDate"
  placeholder="MM/DD/YYYY" />

为什么混合插值和表达式是不好的做法：


它增加了标记的复杂性

无法保证它适用于每个指令，因为插值本身就是一个指令。   如果另一个指令在插值运行之前访问属性数据，它将获得原始插值标记而不是数据。

它会影响性能，因为插值会为范围添加另一个观察者。

由于不推荐使用，我们不对此进行测试，对AngularJS核心的更改可能会破坏您的代码。


— AngularJS Developer Guide - Interpolation

动态指令ng-focus

1 个答案: