Add class not working inside controller

[Abdul Azeez Shaik]

Dear all,

I have following code inside my controller,

$scope.$on('$viewContentLoaded', function() {

                       $('#myCarouselinside div:first').addClass("active");

}

When i put above addClass() function inside document.ready() function, it is working as expected.

This is my html code. Could anyone please let me know what mistake am i doing in this?

 <div id="myCarousel" class="carousel slide">

                    <!-- Carousel items -->

                    <div id="myCarouselinside" class="carousel-inner">

                        <div class="item" ng-repeat="viewPrintcampaign in viewPrintcampaigns" ng-init="first=$first">

                            <img src="{{viewPrintcampaign.printcampaignpic}}" alt="">

                            <div class="carousel-caption">

                                <h4>

                                    {{viewPrintcampaign.printcampaignname}}{{viewPrintcampaign.printcampaignseason}}</h4>

                                <p>

                                    {{viewPrintcampaign.printcampaigndescription}}</p>

                            </div>

                        </div>

                    </div>

                    <!-- Carousel nav -->

                    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>

                    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

                </div>

[Abdul Azeez Shaik]

Main issue here is, its unable to find the 'element'. I tried this even with angular.element() as well. I tried putting alert inside the 'viewContentLoaded' event and it worked fine.

Can someone please guide me if there is nay mistake in the implementation?

~Azeez

[ganaraj p r]

First of all dont do DOM manipulation inside your controller. That would go against the philosophy of angular. 

It would be great if you could provide a fiddle with your use case so that we can have a working example of the problem you are having.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

--
Regards,
Ganaraj P R

[Abdul Azeez Shaik]

Hi Ganaraj,

Thanks for the reply.

I am using ng-repeat to loop my data. For the very first tag of ng-repeat, i would like to add one class element.

Is there any better way of doing it if changing it through controller is not the recommended way

Here is the use case,

<div class="item" ng-repeat="viewPrintcampaign in viewPrintcampaigns"></div>

For the very first object, i want it to be class="active item". Can you please suggest me the right way to do it?

Thanks,

Abdul

[Abdul Azeez Shaik]

Also, i do not want to use ng-class, as i there is some dependency on class = "active" attribute.

[Andy Joslin]

Hi Abdul,

You can still use ng-class: <div class="item" ng-class="{active: $index == 0}" ng-repeat="viewPrintcampaign in viewPrintcampaigns"></div>

It adds the "active" to the class tag when appropriate, so all checks for hasClass will still work.

[Abdul Azeez Shaik]

Hi Andy,

Its working great!! Thanks for reminding me that ng-class would work for all checks in hasClass.

Thanks,

Abdul

[joshkurz]

I swear Andy You are a Genius. Thanks allot for this.