Не удается получить идентификатор элемента

Question

У меня есть следующая директива, где я пытаюсь получить идентификатор элемента и атрибута, но я становлюсь неопределенным.

Код:

'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 ute указывает unique id для элемента HTML. В основном используется для указания на style in stylesheet и на JavaScript to manipulate the DOM elements с определенным идентификатором.

Свойство id задает или возвращает идентификатор элемента (значение атрибута id элемента).

Итак, согласно требованию, вы должны определить атрибут id в своем атрибуте директивы.

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

Таким образом, когда Вы зайдете консоль с этим кодом строки вернет вам значение атрибута id.

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

Answer 2

id не что иное, как атрибут присутствует в директиве, так что вы можете получить доступ к коллекции атрибутов непосредственно внутри link параметра функции 3 (attrs). Хотя вы можете применить @Phil предложенный ответ.

Но в вашем случае, что я думаю, вы должны иметь атрибут id на свой элемент директивы, тогда вы можете видеть его только консоль.

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

Answer 3

В функции директива link, elem является объектом jqLite (или JQuery, если включен), так что вы бы использовать что-то вроде

elem.prop('id') 

или

elem.attr('id') 

См https://docs.angularjs.org/api/ng/function/angular.element