Calling Jquery Function in an Angular Controller

Question

Calling Jquery Function in an Angular Controller

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I have a file with functions jquery , and I need some functions that are in it to use within controllers in 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 tried to import it so

import $ from 'funcs.js';

(function () {
    'use strict';

    modulo
        .controller("CarregaCamposController", CarregaCamposController);

gave error

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

jquery angularjs

asked by anonymous 16.10.2017 / 14:40

2 answers

How to pass data from two unrelated tables in a view? How to reset an input type="file"?

score 1 · 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 called by ready() .

When you run the following code:

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

You are trying to call a function called alerta() that is visible from that scope .

Since your original function is hidden within 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"); };

score 0 · Answer 2

0

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

16.10.2017 / 16:47