JQuery calls doesn't work in my AngularJS page

Question

JQuery selectors in this page of my project doesn't work, they calls autocomplete method and datepicker in the same way as other pages where works properly.

This is my code, i reviewed it 420 times and again.

If i try to fill the input field should call get method in dati.js but it seems like the $ selector doesn't work, because is not working neither for .datepicker

Controller

angular.module('AceApp').controller('praticaCtrl', function($scope, $window, $http, $timeout, $rootScope, $state, $stateParams, $location, $auth, $uibModal, dati, $compile, $filter) {
    $( ".datapicker" ).datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: "1900:2050",
        dateFormat: 'dd-mm-yy'
});
$(".dataPickerModal").datepicker({
    changeMonth: true,
    changeYear: true,
    yearRange: "1900:2050",
    dateFormat: 'dd-mm-yy'
}).css({"z-index":10000});
////////////
$("#luogoNascita").autocomplete({
    source: function (request, resolve) {
        console.log("vvv");
        dati.getCitta(request.term)
            .success(function (data) {
               resolve(data);
            })
            .error(function () {
            });
        }
    });

$("#luogoNascita").on("autocompleteselect", function(event, ui) {
    $timeout(function() {
        $scope.cliente.comune_nascita.sigla = ui.item.sigla;
        $scope.cliente.comune_nascita.codice_catastale = ui.item.codiceCatastale;
    });
}); ETC...

HTML

<div class="col-md-3 col-sm-3 col-xs-7">
    <label for="luogoNascita">Luogo di Nascita</label>
    <input ng-model = "cliente.comune_nascita.nome" autocomplete = "on" 
           type="text" class="form-control" name="luogoNascita"
           id="luogoNascita" placeholder="Ricerca Città" style="width:100%" />
</div>

APP.JS

.state('pratica', {
    url: '/pratica/:id',
    title: 'Dati anagrafici',
    icon: 'fa fa-dollar',
    view: false,
    sottomenu: false,
    templateUrl: 'views/pages/pratiche/pratica.html',
    permissions: 'quinto-stipendio_pratica',
    controller: 'praticaCtrl',
    resolve: {
        lazyLoad: ['$ocLazyLoad', function($ocLazyLoad) {
            return $ocLazyLoad.load([
                {
                    serie: true,
                    name: 'dataTables',
                    files: ['../components/datatables/media/js/jquery.dataTables.js', '../components/_mod/datatables/jquery.dataTables.bootstrap.js', '../components/angular-datatables/dist/angular-datatables.js']
                },
                {
                    name: 'AceApp',
                    files: ['js/controllers/pages/pratiche/pratica.js']
                },
                {
                    name: 'stepF',
                    files: ['js/controllers/pages/dropzone/uploader.js']
                }
            ]);
        }]
    },
    permissions: 'leggi-cessione_quinto'
})

I've only copy-pasted this code from other pages where it works, and there are no differences.

Answer 1

Well .. you cannot just use $() in AngularJS.

There are solutions to combine jquery and angularjs

• https://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/

  • Combining JQuery and AngularJS