Angular Scope with apply in ng-init

1
Hello, I have the following problem, I have this function that receives data from an internal database and stores the information in $scope.dados , I can show the $scope.dados values normally on the screen.

The problem comes at the time of using some value of $scope.dados in ng-init , in the code below I can bring a value of the bank and display it in input , but in case I want to save

selecionou($stateParams.id);
function selecionou(id) {
       $pouchDB.get(id).then(function(resp){
       $scope.dados = resp;
       $scope.$apply();
    });
 }

{{formulario.valor}}

<input type="text" placeholder="" ng-value="dados.valor" ng-model="formulario.valor" ng-init="formulario.valor = dados.valor">
    
asked by anonymous 19.07.2016 / 18:25

3 answers

0

Why use ng-init?

You can simply:

function selecionou(id) {
       $pouchDB.get(id).then(function(resp){
       $scope.dados = resp;
       formulario.valor = resp.valor;
       $scope.$apply();
    });
}
    <input type="text" placeholder="" ng-model="formulario.valor">

and then bind in the form.value. ng-value only makes sense in <option> or input[radio]

or you can bind directly to the data.value

function selecionou(id) {
           $pouchDB.get(id).then(function(resp){
           $scope.dados = resp;
           $scope.$apply();
        });
    }
    <input type="text" placeholder="" ng-model="dados.valor" >
    
19.07.2016 / 18:51
1

Add in ng-init the call to your function (selected) on that, as soon as ng-init is built it will fire its function so that it triggers the call on the server, and fills its object that is used in ng-model .

NOTE: ng-init is triggered whenever the html is being built, ie at that time its variable 'data.value' still has no value as soon as the server call is an async call and so its variable data. value has not yet been populated with server return.

function selecionou() {
       $pouchDB.get($stateParams.id).then(function(resp){
       $scope.dados = resp;
    });
 }


<input type="text" placeholder="" ng-value="dados.valor"   ng-model="formulario.valor" ng-init="selecionou()">
    
19.07.2016 / 19:30
1

Never use ng-init , the way you use it is exactly what it is recommended not to do, there are few uses of ng-init that are considered appropriate, it is usually recommended to initialize the values in the Controller.

In your case there is still another error that is the use of ng-value , it was not meant to be used in a input tag except for input[type=radio] and the option tag, for tags value input only ng-model is required.

So the data should be started in your controller instead of ng-init , and it all depends on how your data comes in, simplifying could be

selecionou($stateParams.id);

function selecionou(id) {
   $pouchDB.get(id).then(function(resp){
       $scope.dados = resp;
    });
}

Considering that you are using a PouchDB wrapper for AngularJS then you should not need to call $scope.apply()

  

Your template should basically be

{{dados.valor}} 
<input type="text" ng-model="dados.valor" />

As we use $scope.dados to save the result of the query then we can also use it directly in the binding, any value that the user will change will be automatically changed in the object.

And just remembering that when you change the value by javascript you should never change directly in input , you should only change the values in your $scope and let the angle update the bindings automatically.

    
19.07.2016 / 21:29