[AngularJS] HTML code converted to directive, jQuery cannot find the elements anymore

[Jan Willem Hennink]

Hi,

I have a block of code (bootstrap dropdown) which I want to convert into a 
directive:


<div class="btn-group btn-block">

<button type="button" class="btn btn-default dropdown-toggle btn-block" 
data-toggle="dropdown">

<span class="selection">Choose Language</span>&nbsp;<span class="caret"
></span>

</button>

<ul class="dropdown-menu languagedropdown" role="menu">

<li ng-repeat="language in languages"><a href="#">{{language.LangName}}
</a></li>

</ul>

</div>


I want it to be shown like this:

<languageSelect></languageSelect>

 Or maybe even better:

<selectDropdown data=language></selectDropdown>

I have the following challenge though, which I am still unable to solve:

First of all, since the dropdown is not a tipical select / option dropdown, 
I use the following jQuery to derive the selected value:

 $(".languagedropdown li a").click(function(){
angular.element($('body')).scope().filterLanguage($(this).text());

angular.element($('body')).scope().$apply();

$('.m-item').removeClass('m-active');

$('.m-scooch').scooch('reset');

var text = $(this).text() == "All" ? "Choose Language" : $(this).text();

$(this).parents(".btn-group").find('.selection').text(text);
}); 


Second, I call the filterLanguage() function in my directive since I want 
to change the “all” value to filter = “”.

Code in my Controller:

$scope.filterLanguage = function(filterValue) {

$scope.selectedLanguageFunction = (filterValue == "All") ? "" : filterValue;
}

The issue I am having is as follows:

Once I convert to html codeblock to a controller, my jQuery (second code 
block) is not working anymore, since the jQuery cannot find the DOM 
elements anymore.

What I guess is that the jQuery needs to be:


   - Modified, or
   - Added to the directive, or
   - Converted to Angular code

But all my attempt are failing.

Is there anybody who can help me out with a good code example of the 
directive? (eg. How to fix the jQuery thing?)

-- 
You received this message because you are subscribed to the Google Groups 
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.