2016-07-27 52 views
3

我試圖在使用時點擊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> 
+1

我認爲你應該使用'.closest',而不是'父(「TD」)',或者認爲使用'的NG-類「如果可行的話。 –

+0

@PankajParkar。最近工作。如果你想添加一個答案,我會接受它。 – NealR

+0

是的,我做了,謝謝;) –

回答

4

.parent看起來確切只是上面的element。我會說,而使用.closest所以它會在父搜索,直到它得到td

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

你是如何得到這個工作? [我試了一下,但它不適合我](http://plnkr.co/edit/iXuspSkKCtQi9TbE0tWJ?p=preview),因爲'.find(...)'實際上似乎不工作我的repro。有什麼不同?你可以用一個完整的工作演示來擴展你的答案嗎? – Jeroen

+0

@Jeroen這基本上就是我所擁有的。我不得不修改它以包含datepicker使用的'button'元素,例如:'elm.find('table tbody tr button.active')。closest('tr')。find('button')。addClass(' selectedReportWeek')' – NealR

+0

奇怪。我很想看到一個有效的更新的plnkr,因爲據我所知[相關文檔](https://docs.angularjs.org/api/ng/function/angular.element#angular- s-jqlite)'.closest'和'.find'與'.active'選擇器不應該與jQlite一起工作... – Jeroen

0

如何採取比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)。

+0

說明已添加到帖子爲什麼這不起作用 – NealR