AngularJS Bind to Service variables vs service functions?

Question

As an angularJS newbie, I am puzzled by the fact I have to bind to a function returned from the service to update the view, not the data itself, I couldn't find any official document explaining this, Does anyone know why?

JSFiddle Code Sample

<div ng-controller="MyCtrl">
binding to a function works!
    <p ng-bind-html-unsafe="tempLog.returnBuffer()"></p>
    <br><br>
       bind to the service variable: Doesn't work, why?
      <p>log={{tempLog.buffer}}</p>
        <br><br>
    bind to scope var instead of service var, still doesn't work
    <p>log={{logBuffer}}</p>
   bind to a scope var which points to the service Function, works!
            <p>log={{pLogFunc()}}</p>
    <button ng-click="addText('more')">Trace</button><br>
</div>

JS code

var myApp = angular.module('myApp',[]);

myApp.factory('myLog', function() {
    var internalBuffer = "";
    return {
        buffer:internalBuffer,
        trace:function(input){
                internalBuffer = internalBuffer + "<br>" +input;
                buff = input;
            },
        returnBuffer:function(){
            return internalBuffer;
        }
    }
});


function MyCtrl($scope, myLog){
    $scope.tempLog = myLog;
    $scope.logBuffer = myLog.buffer;
    $scope.pLogFunc = myLog.returnBuffer;
    myLog.trace("aaa");

    $scope.addText = function(str){
        myLog.trace(str)
    }

}

Because you forget the paranthesis (`{{tempLog.buffer()}}`)? — Blackhole, May 31 '14 at 23:50
No, that is not the reason, the real problem is what is pointed out below by ryeballar, that the buffer variable returned by the service is not bound to the internalBuffer. — user3277841, Jun 02 '14 at 16:13

score 0 · Accepted Answer · answered Jun 01 '14 at 01:11

This is not an AngularJS binding problem, this is just how javascript works. In your service:

1 buffer is assigned to a primitive variable internalBuffer.

2 trace() accepts a parameter that changes the internalBuffer primitive

3 returnBuffer() returns the internalBuffer primitive

Since trace() changes the internalBuffer primitive, any binding to buffer does not affect the changes in the internalBuffer, furthermore, returnBuffer() returns the value of the internalBuffer so naturally the changes you made with the trace() function affects the return value of the returnBuffer() function.

Any of these suggestions may work on your end:

[1] If you want to bind from the buffer property of your myLog service, then change your trace() function to something like this:

trace:function(input){
  this.buffer = this.buffer + "<br>" +input;
}

[2] You may disregard the buffer property and solely use the returnBuffer() if youdon't want to expose yourinternalBufferand only use thetrace()to have access in changing theinternalBuffer`

[3] You can use both, the buffer property provides access to another buffer format while the internalBuffer holds all the private buffers / format / or anything else that you may not want to expose to the users of the service. Just be sure to update the buffer in your trace() function by using this as well.

I see, the buffer variable was only initialized once when the service is created, there is no binding between buffer and internalBuffer. (that is where I was mistaken). Thanks for the explanation. — user3277841, Jun 01 '14 at 03:51
You're welcome. If you find this answer useful, you may mark this as the accepted answer. — ryeballar, Jun 01 '14 at 06:14

AngularJS Bind to Service variables vs service functions?

1 Answers1