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

谢谢@Explosion Pills;你是对的;通过使用Angular中已有的功能，您可以更轻松地完成这项工作。

我已使用更新的代码http://plnkr.co/edit/e0jD6RnwXbRQOc9NfdiS

分叉了Plunker

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函数构建。

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

1 个答案: