Question

我试图通过表单上的自定义指令将焦点设置在输入字段上。在指令中使用template属性时，这样可以正常工作。但是，当我通过templateUrl将模板移动到单独的html文件中时，element.find()无法再找到我的输入字段：

代码如下：

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.16/angular.js" data-semver="1.2.16"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <form get-input-by-id="input2">
      <my-input id="input1"></my-input>
      <my-input id="input2"></my-input>
    </form>
  </body>

</html>

js：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

app.directive('getInputById', function() {
  return {
    link: function (scope, element, attrs) {
      //console.log(element);
      var toFocus = element.find('input');
      console.log(toFocus);
      toFocus[1].focus();
    }
  }
});

app.directive('myInput', function() {
  return {
    restrict: 'E',
    scope: {
      id: "@id",
    },
    // this is not working
    templateUrl: 'template.html',
    // this is working
    //template: '<div><input id="{{id}}"/></div>',
    link: function (scope, element, attrs) {
    }
  }
});

模板：

<div>
  <input id="{{id}}"/>
</div>

我添加了工作和不工作的掠夺者：

This plunker is working

This plunker is not working

Answer 1

问题是在下载模板之前不会呈现子指令，因此父链接函数找不到任何input元素（请阅读注释中的其他问题）。

一个可以双向工作的选项是让子指令（无论何时被渲染）询问父指令，是否应该聚焦。

app.directive('getInputById', function() {
  return {
    scope: {
      getInputById: '@'
    },
    controller: function($scope) {
      this.isFocused = function(id) {
        return $scope.getInputById === id;
      }
    }
  }
});

app.directive('myInput', function() {
  return {
    restrict: 'E',
    require: '?^getInputById',
    scope: {
      id: "@id",
    },
    templateUrl: 'template.html',
    link: function (scope, element, attrs, ctrl) {
      if (ctrl && ctrl.isFocused(scope.id)) {
        var input = element.find('input')
        input[0].focus();
      }
    }
  }
});

这样，父指令可以更通用，而不是完全限于input元素。每个不同的可聚焦＆＃34;控制问父母并实现自己的焦点。

Working plunker

在指令中使用templateUrl时，element.find（）无法正常工作

1 个答案: