Question

作为一个angularJS新手，我很困惑的事实是我必须绑定到从服务返回的函数来更新视图，而不是数据本身，我找不到任何解释这个的官方文档，有谁知道为什么？

<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代码

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)
    }

}

Answer 1

这不是AngularJS绑定问题，这只是javascript的工作原理。在您的服务中：

1 buffer被分配给原始变量internalBuffer。

2 trace()接受更改internalBuffer原语

的参数

3 returnBuffer()返回internalBuffer原语

由于trace()更改了internalBuffer原语，因此对buffer的任何绑定都不会影响internalBuffer中的更改，此外，returnBuffer()会返回internalBuffer的值trace()因此，您使用returnBuffer()函数所做的更改会自然影响buffer函数的返回值。

任何这些建议都可能适用于您：

[1] 如果要从myLog服务的trace()属性进行绑定，请将trace:function(input){ this.buffer = this.buffer + "<br>" +input; }函数更改为以下内容：< / p>

buffer

[2] 如果您returnBuffer() internalBuffer don't want to expose your trace（）{{，您可以忽略and only use the属性并单独使用to have access in changing the 1}} internalBuffer`

[3] 您可以使用两者，buffer属性提供对另一种缓冲区格式的访问，而internalBuffer包含所有私有缓冲区/格式/或其他任何内容您可能不希望向服务的用户公开。请务必使用buffer更新trace()功能中的this。

AngularJS绑定到服务变量与服务功能？

1 个答案: