CODEWITHSUNDEEP
javascriptangularjs
user1834664
user1834664

Reputation: 451

Angular js binding with normal html element

I was trying angularjs bind functionality. I had one scenario where i have a form tag inside "ng-app" tag

<form name="CollectMFPToEvaluate" >
    <input type="text" name="name" ng-model="risk.name" ng-show="false">

</form>

In my app.js file i am writing a factory which will call a normal javascript function to set the value of name field

angularApp.factory('NameFactory', function(){
 return {
    bodyLoaded:function(){
       collectName();
    },
}; 
});

var collectName = function(){
    document.CollectMFPToEvaluate.name.value = "stackoverflow"; 
};

After i call my factory in apps.js i try to access the name variable app.js

$scope.risk = {
        name : '',

};

NameFactory.bodyLoaded();
     alert("risk = "+$scope.risk.name);

I am expecting the alert to print "risk = stackoverflow", but it prints "risk =". Am i missing something if so can anyone please correct me.

Thanks

Upvotes: 0

Views: 71

Answers (1)

Ryan Q
Ryan Q

Reputation: 10673

Since your updating the view value directly you'll need to tell the angular world you've updated the view. If you run an apply in the factory that should fix it. Take a look at Angular Scope

angularApp.factory('NameFactory', function( $rootScope ){
   return {
      bodyLoaded:function(){
        $rootScope.$apply( collectName() );
      }
    }; 
});

Upvotes: 1

Related Questions