AngularJS：如何从外部访问指令内部定义的属性答案

【问题标题】：AngularJS: How to access attributes defined inside directive from outsideAngularJS：如何从外部访问指令内部定义的属性
【发布时间】：2016-04-26 14:49:02
【问题描述】：

我正在使用一个指令来将省略号放在文本溢出上，称为 angular-ellipsis。如果文本有足够的空间，则角省略号不会应用 ...。我需要知道省略号是否应用于某些文本。

查看指令的代码，我可以看到它有一个似乎与我正在寻找的属性相匹配的属性 - attribute.isTruncated：

compile: function(elem, attr, linker) {

    return function(scope, element, attributes) {
        /* State Variables */
        attributes.isTruncated = false;

通过设置元素的“数据溢出”属性，它似乎也做了类似的事情：

element.attr('data-overflowed', 'false');

这里是指令代码的链接，不太复杂也不太长：

https://github.com/dibari/angular-ellipsis/blob/master/src/angular-ellipsis.js

我想知道我可以从我的控制器中访问这些属性中的任何一个吗？如果可以，如何访问？如果这很明显，请原谅我，但我对指令完全陌生......

【问题讨论】：

你能试试angular.element(element).attr('data-overflowed')吗？
我假设你的意思是内部元素是 div 的 id？ IE。 angular.element('div-name').attr('data-overflowed') ？我试过了，得到了错误：'jqLite 不支持通过选择器查找元素'

标签： angularjs

【解决方案1】：

记住AngularJS中的“JS”。
如果您可以通过其id 或class 属性找到您的元素，那么您应该能够使用纯javascript 查询它，使用querySelector 和getAttribute：

document.querySelector("#element-id").getAttribute('data-overflowed');

这不是一个完美的解决方案，因为在某些测试框架中，不能保证您拥有document 接口（这就是Angular 拥有$document 包装器的原因），但它可以满足您的需求（没有jQuery！）。如果jqLite（由angular.element 使用）通过ID 或类名启用find 会更简单，而不仅仅是通过标签名。

【讨论】：