Angular Scope with apply no ng-init

Question

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

The problem comes at the time of using some value from $scope.dados in the ng-init, in the code below I can bring a bank value and display it on 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">

Answer 1

Add in ng-init the call to its function (selected) in that, once ng-init is built it will trigger 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 html is being built, that is at that time its variable 'data.value' still has no value, as soon as the server call is an async call and thus its variable data.value has not yet been filled with the 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()">

Answer 2

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

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

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

selecionou($stateParams.id);

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

Whereas you’re using a Pouchdb wrapper for Angularjs so you shouldn’t need to call $scope.apply()

NOTE: I have no knowledge about the operation of Pouchdb, by your code I am considering that it returns an object with the data that needs to edit in the form

Your template should be basically

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

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

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

Answer 3

why use ng-init?

you can just:

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 formuario.valor. ng-value only makes sense in <option> or input[radio]

or you can bind directly to the data.

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