Question

我有以下指令，我正在尝试获取元素和属性ID，但我未定义。

代码：

'use strict';

angular.module('clientApp')

.directive('myVideo', function(){
  return {
    restrict: 'A',
    replace: true,
    template: '<div style="border:solid 10px gray; width:auto;">'+
              '<video style="width:100%; height:auto;" controls>'+
              '<source src="views/unit_1.mp4" type="video/mp4" id="video">'+
              '</video>'+
              '{{test}}</div>',
    link: function(scope, elem, attrs) {
      console.log('Elements', elem.id);
      console.log('Attributes', attrs.id);
    }
  };
});

Answer 1

id只是指令中存在的属性，因此您可以直接在link函数第3个参数（attrs）内访问属性集合。虽然您可以申请@Phil建议的答案。

但在你的情况下，我认为你的指令元素应该有id属性，那么只有你才能看到它。

<div my-video id="myId"></div>

Answer 2

在指令link函数中，elem是一个jqLite对象（如果包含jQuery，则为jQuery），所以你会使用像

这样的东西

elem.prop('id')

或

elem.attr('id')

请参阅https://docs.angularjs.org/api/ng/function/angular.element

Answer 3

id属性为HTML元素指定unique id。它主要用于指向具有特定ID的style in stylesheet和JavaScript to manipulate the DOM elements。

id属性设置或返回元素的id（元素＆id;属性的值）。

因此，根据要求，您必须在指令属性中定义id属性。

<div my-video id="videoId"></div>

因此，当您使用这些行代码记录控制台时，它将返回id属性的值。

console.log('Elements', elem.id);      // 'Elements', videoId
console.log('Attributes', attrs.id);   // 'Attributes', videoId

无法获取元素ID

3 个答案: