无法获取元素ID

时间:2016-10-18 05:41:45

标签: angularjs angularjs-directive

我有以下指令,我正在尝试获取元素和属性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);
    }
  };
});

3 个答案:

答案 0 :(得分:3)

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

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

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

答案 1 :(得分:2)

在指令link函数中,elem是一个jqLit​​e对象(如果包含jQuery,则为jQuery),所以你会使用像

这样的东西
elem.prop('id')

elem.attr('id')

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

答案 2 :(得分:0)

id属性为HTML元素指定unique id。它主要用于指向具有特定ID的style in stylesheetJavaScript 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