来自链接函数的数据绑定id的getElementByID

Question

我正试图通过Link函数的id访问指令模板中的一个元素。但是，元素id是数据绑定的，在链接函数运行时似乎不可用。

我已经在本Plunker中演示了这个问题：http://plnkr.co/edit/vmgT3CaUbkaPNn6gDHJh

link: function (scope) {
    var textbox = angular.element(document.getElementById(scope.id));
          textbox.bind('blur', function () {
            scope.$apply(function () {
                scope.value = textbox.val();
            });
          });

如果我对元素的id进行硬编码，这可以正常工作，但正如这个fork中所示：http://plnkr.co/edit/5qML3rGBwiCC7fc8eKVf因为我通过id附加了一个事件侦听器，所以如果我重用硬编码的id，我就无法获得所需指令实例的隔离。

link: function (scope) {
          var textbox = angular.element(document.getElementById('id'));
          textbox.bind('blur', function () {
            scope.$apply(function () {
                scope.value = textbox.val();
            });
          });
        }

当数据绑定id可用时，除了链接之外，还有其他函数可以运行此代码吗？还是我只是想用完全错误的方式来做这件事？

Answer 1

感谢@爆炸药丸；你是正确的；通过使用Angular中已有的功能，您可以更容易地做到这一点。

我已经用更新的代码分叉了Plunker：http://plnkr.co/edit/e0jD6RnwXbRQOc9NfdiS

link: function (scope) {
          scope.blur = function(){
            console.log(scope.value);
          }
        }

和模板：

<div>
<label for="{{::id}}">{{::label}}</label>
<input class="form-control" id="{{::id}}" type="{{::type}}" placeholder=" {{::placeholder}}" ng-model="value" ng-blur="blur()">
<div>{{value}}</div>
</div>

我仍然在模板中有ID的一次性绑定，因为它被标签使用；但是指令本身是使用ng函数构建的。