How to run jquery when I'm using angularjs partials?

Question

I'm using the angular UI router and breaking my pages up into partial views and then loading those. I'm noticing I can't seem to use jquery on the partial views. I have a main index page and then I'm inserting the partials using angular js.

Any sort of jquery I want to run on the code in any of the partials won't work.

Here's an example of the index page where I'm inserting the partials:

 <div id="page-content-wrapper">
     <div ui-view>

     </div>
 </div>

and then my ui router:

$urlRouterProvider.otherwise('/home');

$stateProvider
    .state('home', {
        url: '/home',
        templateUrl: 'global/partials/home.html'
    })
    .state('search', {
        url: '/search',
        templateUrl: 'search/partials/search.html'
    })
    .state('intake', {
        url: '/intake',
        templateUrl: 'intake/partials/intake.html'
    })
});

and an example of one of the partials (a form) where I'm trying to run some jquery to find out the value of a form field:

<h1>Intake Form</h1>
         <form name="intakeform">
             <div class="form-group">
                  <label for="sourceSystem">Source System</label>
                     <select class="form-control" id="sourceSystem" ng-model="sourceSystem">
                       <option value="" selected disabled>Select Source System</option>
                       <option value="Cosmos DIV">COSMOS</option>
                       <option value="UNET">UNET</option>
                    </select>
            </dv>
       </form>

I have to auto populate the next three fields based on the value of this initial field and for some reason if the most basic jQuery isn't working:

function autoFill() {
    $('select').on('change', function() {
      alert( this.value ); 
    });
}

Any ideas on how to get jQuery working on these partial views? Or should I just skip the ui router and just create these pages individually?

Full disclosure, we're using JAVA with JSP's and Adobe's CQ5 CMS if it helps. I would gladly do this with .Net, but the project is all JAVA (which I'm not very familiar with). This is why I tried to use Angular's MVC design pattern.

Also, I'm not getting any errors in the browser console and have all the necessary scripts included in the bottom of the page.

Any help is greatly appreciated.

P

Answer 1

You should get familiar with Angular directives that can do the job you're looking for.

Basically, here, you can use ngChange on select elements.

In the partial :

<form name="intakeform">
         <div class="form-group">
              <label for="sourceSystem">Source System</label>
                 <select ng-change="updatefunction()" class="form-control" id="sourceSystem" ng-model="sourceSystem">
                   <option value="" selected disabled>Select Source System</option>
                   <option value="Cosmos DIV">COSMOS</option>
                   <option value="UNET">UNET</option>
                </select>
        </dv>
   </form>

In the controller :

$scope.updateFunction = function() {
    // Do whatever you want here
}

EDIT:

On AngularJS, you have some useful directives to populate a select element and bind them to your model.

Example :

<form name="intakeform">
         <div class="form-group">
              <label for="sourceSystem">Source System</label>
                 <select ng-change="updatefunction()" ng-options="item in items" class="form-control" id="sourceSystem" ng-model="sourceSystem">

                </select>
        </div>
   </form>

It will populate your select element for each value stored in $scope.items. And then, the value will be updated in your model, as you putted the ngModel directive ($scope.sourceSystem).

Answer 2

Ha! I finally figured out.

Here is what I did. After doing some more digging for using AngularJS to pre-populate fields, I came upon this question: how to autopopulate text field in anguar js based on other form fields

And then did this:

in my app.js file:

app.controller('IntakeController', function($scope, $timeout){
 $scope.systems = [{
    name: 'Cosmos',
    ossi: 'Cosmos DIV'
  }, {
    name: 'UNET',
    ossi: 'ADJ and ENG'
  }];
});

and then this is my form:

<div ng-controller="IntakeController">
   <h1>Intake Form</h1>
        <form name="intakeform">
         <div class="form-group">
            <label for="sourceSystem">Source System</label>
           <select class="form-control" ng-model="system" ng-options="s.name for s in systems" >
                <option value="">Select Source System</option>
           </select>   
        </div>
       <div class="form-group">
            <label for="otherSystem">Other Source System Indentifiers</label>
            <input type="text" ng-model="system.ossi" class="form-control" placeholder="Other Source System Indentifiers">
        </div>
    </form>                 
</div>              

Now when I click on the source system, the other source system identifiers are automatically populated.

Thanks for your help and letting me know this can be done rather quickly with AngularJS instead of jQuery.

P