javascript - 为什么服务中的数据没有从指令更新？

Question

通过以下设置，我尝试更新保存在服务中并与 Controller 共享以将其分配给 View 的数据。

在示例中，您可以看到 2 个变量。一个包含一个数组，另一个只是一个字符串。

我不明白的是为什么在 View 中更新和使用了数组而字符串却没有？!

JavaScript:

function fooService() {
    var mystring = 'old string';
    var myarray = [];

    var updateArray = function(data) {
        myarray.push(data);
    };

    var updateString = function(data) {
        mystring = data;
    };

    return {
      myarray: myarray,
      mystring: mystring,
      updateString: updateString,
      updateArray: updateArray
    }
}

function MainCtrl($scope, fooService) {
    this.myarray = fooService.myarray;
    this.mystring = fooService.mystring;
}

function fooDirective(fooService) {

    function link(scope) {

      fooService.updateArray(scope.vm.name);
      fooService.updateString('new string');

    }

    return {
        restrict: 'EA',
        replace: true,
        template: '<h2 style="color: {{vm.color}};">{{vm.name}}</h2>',
        scope: {},
        controller: 'MainCtrl',
        controllerAs: 'vm',
        bindToController: {
            name: '@',
            color: '@'
        },
        link: link
    };
}

angular
    .module('app', [])
    .service('fooService', fooService)
    .controller('MainCtrl', MainCtrl)
    .directive('fooDirective', fooDirective);

HTML:

<div ng-app="app">
    <div ng-controller="MainCtrl as vm">
        {{vm.myarray}}
        {{vm.mystring}}
        <foo-directive data-name="Markus" data-color="red"></foo-directive>
        <foo-directive data-name="Nemanja" data-color="green"></foo-directive>
        <foo-directive data-name="Luke" data-color="blue"></foo-directive>
    </div>
</div>

可能只是我理解错误，但服务应该保存在整个应用程序中共享的数据，对吗？

这是工作示例:http://jsfiddle.net/markus_falk/f00y3tL3/6/

Answer 1

services should hold data that is shared across the app right?

这是正确的，但是当你这样做的时候

return {
  myarray: myarray,
  mystring: mystring,
  // ...
}

您返回新对象(将成为您的服务实例)，该对象引用 myarray 和 copy mystring。因此，由于存在对 myarray 的引用(所有对象都作为引用传递)，它在服务中更新得很好。但是，它不会用于字符串(原始类型不可变，作为值传递)，因为服务只返回它的一个副本。

使用 getter/setter 方法代替修改字符串(原始值)。