jquery function does not work with routeprovider angularjs

Question

jquery function does not work with routeprovider angularjs

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)

4

I'm doing a web application with AngularJS and made this routeprovider to single page

angular.module("app").config(function($routeProvider){
$routeProvider.when("/Proposta", {
templateUrl:"Proposta.html",
controller :"ClienteController"
});

I have function jquery to interact with a input of a form on this page proposta.html :

<script type="text/javascript">
$(function() {
  $("#valor1").maskMoney({
    symbol: 'R$ ',
    showSymbol: true,
    thousands: '.',
    decimal: ',',
    symbolStay: true
  });
})

When I'm on page index and I'm switching to page proposta.html , this function does not work.

jquery angularjs

asked by anonymous 03.08.2015 / 05:12

3 answers

Send only list object that has changed to the controller Firebird, insert with where not exists

score 2 · Answer 1

You are running the maskMoney function at the time the page ends the load (via $() ). JQuery then maps the DOM object which has the ID # value1, and applies the function.

In a second moment, Angular interprets the /Proposta route mapping, and adds the elements of Proposal.html to the DOM. The problem is that the jQuery call has already been executed.

Solution: Run the .maskMoney method inside the controller ClienteController , thus ensuring that the DOM elements of proposal.html are already loaded.

score 1 · Answer 2

Complementing the above answer, if you create a directive, and inject into your input field, the directive will be executed After the field is created, so the JQuery code will work, I believe this is the simplest and fastest solution to the problem.

score 1 · Answer 3

Within the ClientController file you can create a function to start all other related to this view. For example:

$scope.initFunctions = function(){
     $("#valor1").maskMoney({
        symbol: 'R$ ',
        showSymbol: true,
        thousands: '.',
        decimal: ',',
        symbolStay: true
     });
}

or

$scope.initFunctions = function(){
   $(document).ready(function(){
     $("#valor1").maskMoney({
        symbol: 'R$ ',
        showSymbol: true,
        thousands: '.',
        decimal: ',',
        symbolStay: true
     });
   });
}

in the file Proposition.html start this function by calling it with ng-init="initFunctions ()" that all functions will be loaded.

For some reason the RouterProvider along with other modules does not have the expected operation, one solution I found was to use the angular-ui-router that works with stateProvider.