CODEWITHSUNDEEP
javascriptcssangularjstwitter-bootstrap
backtrack
backtrack

Reputation: 8144

Ng-view on load event

I am new to Angular js. I am trying to create SPA. Below is my index.html 

<div  ng-view>

            </div>

and i have a partial view and its controller 

myApp.controller('MainController', function ($scope, $http) {

}

And my partial view 

<accordion-group heading="EMPLOYER">

                        <select class="employer" multiple data-size="5" data-max-options="3" data-live-search="true" ng-model="employer" ng-options="emp for emp in Employers"  >
                        </select>
                        <button ng-click="addField('employer',employer)">Add Field</button>

                    </accordion-group>
                </accordion>

Here comes the problem. IU want to apply an CSS to "employer" class. Like that i have many classes and i am using Bootstrap select.

 $('.employer').selectpicker({
                     style: 'btn-info',
                     dropupAuto: false
                 });

I want to use the above code in the partial view loading event. How can i do that ?

Can anyone help me plz?

Thanks,

Upvotes: 0

Views: 496

Answers (1)

Jase
Jase

Reputation: 830

You'll have to wrap that jquery call in an angular directive. https://docs.angularjs.org/guide/directive

mainApp.directive('mySelectPicker', function () {
    'use strict';

    return {
        restrict: 'A',
        link : function (scope, element, attrs) {

             $(element).selectpicker({
                style: 'btn-info',
                dropupAuto: false
             });
        }
    };
});

Then update the html like this:

<select my-select-picker class="employer" multiple data-size="5" data-max-options="3" data-live-search="true" ng-model="employer" ng-options="emp for emp in Employers"  ></select>

Upvotes: 1

Related Questions