0

I wrote a simple Tab application using jQuery and Angular JS and sometimes after Angular JS renders html my jQuery code is not executed. I am thinking of converting this jQuery code to Angular JS directive.

Here is the link for my code snippet and output

http://jsbin.com/iDAwAso/1/edit?html,output

        $(function(){
        $('ul.tabs li:first').addClass('active');
        $('.block article').hide();
        $('.block article:first').show();
        $('ul.tabs li').on('click',function(){
            $('ul.tabs li').removeClass('active');
            $(this).addClass('active');
            $('.block article').hide();
            var activeTab = $(this).find('a').attr('href');
            $(activeTab).show();
            return false;
        });         
    });

Can someone help me how to convert this to angular directive?

Santhosh
  • 851
  • 3
  • 12
  • 30
  • 1
    Rather than having someone do the work for you, if you're using AngularJS, it'd probably be a good exercise in learning how to "think in AngularJS" by doing this yourself. See http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background?rq=1 – dnc253 Nov 26 '13 at 17:07
  • Hide? Show? Add Class? These are all things Angular handles without creating a directive. – Mike Robinson Nov 26 '13 at 17:15
  • start with `ng-click` , `ng-show` and `ng-class`. Think about what states within your controller or directive would make things match your jQuery manipulation. Try first...then when have troubles come back – charlietfl Nov 26 '13 at 17:16

0 Answers0