Calling Jquery function in an Angular controller

Question

I have a file with functions jquery, and I need some functions that are on it to use within controllers at the angle, but always have JS error that functions are not defined.

jquery

$(document).ready(function () {


    function alerta(msg){
        if(!$('.pinfo').is(':visible')){
            $('.pinfo').html(msg);
            $('.pinfo').fadeIn( 500 ).delay( 3000 ).fadeOut( 500 );
        }
    }


});

Angular

(function () {
    'use strict';

    modulo
        .controller("CarregaCamposController", CarregaCamposController);

    function CarregaCamposController($scope, $http) {

        var http = $http; //variavel conexão ajax escopo global

        var tab;
        var campos  = [];
        var rows_   = [];
        $scope.rows = [];

        try{
            http
                .get("json.php?action=1")
                .then(function (result) {

                    if (result.status === 200) {
                        var dados = result.data;

                        dados.forEach(function (val, key) {
                            if (key !== 0) {// posição 0 do json sempre é preenchida com o nome da fabrica de relatórios
                                //montagem da tabela de campos para montagem do relatório
                                if (tab === "" || tab !== val.descricao[0]) { // Gera uma linha classificando os campos entre suas tabelas
                                    campos.push({id: val.id[1], desc: val.descricao[1], tab: val.descricao[0], tipot: val.input, ct: "1"});
                                    tab = val.descricao[0];
                                } else {
                                    campos.push({id: val.id[1], desc: val.descricao[1], tab: val.descricao[0], tipot: val.input, ct: "0"});
                                }
                            }
                        });

                        $scope
                            .campos = campos;
                    } else {
                        alert("Erro ao carregar o arquivo JSON!");
                    }
            });

        }catch(e){
            alert("Erro.:"+e);
        }


        $scope
            .doConfirm = function(){

                alerta("teste");

            };

    }

})();

I have already imported the file with jquery, before and after the angular file, from the same error, funny is native jquery functions q, like Mask, fadein, fadeout, I can call inside the normal controllers.

tried to import like this

import $ from 'funcs.js';

(function () {
    'use strict';

    modulo
        .controller("CarregaCamposController", CarregaCamposController);

made a mistake

The controller with the name 'CarregaCamposController' is not registered.

Answer 1

You have a variable scope visibility problem (do not confuse with $scope).

On your first call,

$(document).ready(function () { function alerta(msg){/.../}});

You are creating a function, alerta() within the scope of the callback function call for ready().

When you run the following code:

$scope.doConfirm = function(){ alerta("teste"); };

You’re trying to call a function called alerta() visible from that scope.

Since your original function is hidden inside that anonymous function scope, you are not reaching it.

A test, not suggested as final implementation, to check the visibility of the function would add the function to the object window:

$(document).ready(function () { window.alerta = function (msg){/.../}});

So the function can be referenced in the angular code, since now the scope is accessible:

$scope.doConfirm = function(){ window.alerta("teste"); };

Answer 2

I just need to use the functions that are inside the funcs.js inside with my controller.