Binding variables from Service/Factory to Controllers

by

You can’t bind variables. But you can bind variable accessors or objects which contain this variable. Here is fixed jsfiddle.

Basically you have to pass to the scope something, which can return/or holds current value. E.g.

Factory:

app.factory('testFactory', function(){
    var countF = 1;
    return {
        getCount : function () {

            return countF; //we need some way to access actual variable value
        },
        incrementCount:function(){
           countF++;
            return countF;
        }
    }               
});

Controller:

function FactoryCtrl($scope, testService, testFactory)
{
    $scope.countFactory = testFactory.getCount; //passing getter to the view
    $scope.clickF = function () {
        $scope.countF = testFactory.incrementCount();
    };
}

View:

<div ng-controller="FactoryCtrl">

    <!--  this is now updated, note how count factory is called -->
    <p> This is my countFactory variable : {{countFactory()}}</p>

    <p> This is my updated after click variable : {{countF}}</p>

    <button ng-click="clickF()" >Factory ++ </button>
</div>

More Related Contents:

  1. angular ng-bind-html and directive within it
  2. How to call a method defined in an AngularJS directive?
  3. How to use a keypress event in AngularJS?
  4. Angular directives – when and how to use compile, controller, pre-link and post-link [closed]
  5. Angularjs dynamic ng-pattern validation
  6. What is the difference between ng-app and data-ng-app?
  7. Easiest way to pass an AngularJS scope variable from directive to controller?
  8. Using angularjs filter in input element
  9. if a ngSrc path resolves to a 404, is there a way to fallback to a default?
  10. How to autocapitalize the first character in an input field in AngularJS?
  11. Enable angular-ui tooltip on custom events
  12. How to understand the `terminal` of directive?
  13. Custom form validation directive to compare two fields
  14. AngularJS : ng-repeat filter when value is greater than
  15. AngularJS Group By Directive without External Dependencies
  16. How to modify scope from within a directive in AngularJs
  17. AngularJS custom form component / directive using ng-model
  18. How can you limit the value from input using AngularJS?
  19. How to set the dynamic controller for directives?
  20. Can you change templateUrl on the fly?
  21. Pass form to directive
  22. Enable/Disable Anchor Tags using AngularJS
  23. What is `priority` of ng-repeat directive can you change it?
  24. Illegal use of ngTransclude directive in the template
  25. What is ng-transclude?
  26. Understanding the transclude option of directive definition?
  27. How to detect browser using angularjs?
  28. AngularJS. Convert tag value (Unix time to human-readable time)
  29. angularjs text area character counter
  30. When to use double braces {{}} in angularJS

Leave a Comment