在Angular指令中获取父元素

我试图在使用时点击datepicker日历上的按钮来查找父tr元素。由于我不想在我的Angular应用程序中以脚本标记（编辑）的形式使用jQuery ，并且严格使用CSS这是不可能的，所以我创建了下面的指令。 elm.find能够正确地找到并更改按钮的css，所以我知道我已经找到了我正在寻找的元素，但是现在我需要沿着DOM走。在Angular指令中获取父元素

我习惯了jQuery语法，它不起作用，我一直无法在interwebs上找到任何有效的东西。有人可以用语法来帮助我吗？

/* Linker for the directive */ var linker = function (scope, elm, attrs) { elm.on('click', function() { elm.find('table tbody tr button.active').parent('td').css('background-color', 'red'); }); };

EDIT

这是需要为了改变改变背景颜色为一整行被置于一个uib-datepicker元件（角UI引导）上的指令。该框架没有附带这个功能，并且在加载页面之前不会生成HTML。

我需要将指令附加到下面的元素上，找到选定的项目，然后工作备份DOM以查找父项tr。

<uib-datepicker highlightselectedrow class="well well-sm" ></uib-datepicker>

来源

2016-07-27 NealR

我认为你应该使用'.closest'，而不是'父（“TD”）'，或者认为使用'的NG-类“如果可行的话。 –

@PankajParkar。最近工作。如果你想添加一个答案，我会接受它。 – NealR

是的，我做了，谢谢;） –

.parent看起来确切只是上面的element。我会说，而使用.closest所以它会在父搜索，直到它得到td

elm.find('table tbody tr button.active') 
.closest('td').css('background-color', 'red');

来源

2016-07-27 21:13:01

你是如何得到这个工作？ [我试了一下，但它不适合我]（http://plnkr.co/edit/iXuspSkKCtQi9TbE0tWJ?p=preview），因为'.find（...）'实际上似乎不工作我的repro。有什么不同？你可以用一个完整的工作演示来扩展你的答案吗？ – Jeroen

@Jeroen这基本上就是我所拥有的。我不得不修改它以包含datepicker使用的'button'元素，例如：'elm.find（'table tbody tr button.active'）。closest（'tr'）。find（'button'）。addClass（' selectedReportWeek'）' – NealR

奇怪。我很想看到一个有效的更新的plnkr，因为据我所知[相关文档]（https://docs.angularjs.org/api/ng/function/angular.element#angular- s-jqlite）'.closest'和'.find'与'.active'选择器不应该与jQlite一起工作... – Jeroen

如何采取比psuedo jQuery更有角度的方法？这是基于ngStyle Angular doc：

<div ng-style="myStyle">Test</div> 
<div ng-click="myStyle={'background-color':'red'}">Click Me</div>

你会再放在任何元素，您想（TD）的click事件。 ng-style可以移动到你想要的影响（tr）。

来源

2016-07-27 21:00:56 austinthedeveloper

说明已添加到帖子为什么这不起作用 – NealR

在Angular指令中获取父元素

回答

相关问题