Question

通过以下设置，我尝试更新服务中保存的数据并与控制器共享以将其分配给视图。

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

我不明白的是为什么在视图中更新和使用数组并且字符串不是？！

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

服务应该保存在应用程序中共享的数据吗？

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

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

您返回的新对象（将是您的服务实例）具有<{> 1>}的参考和myarray的复制。因此，由于引用mystring（所有对象都作为引用传递），它在服务中更新就好了。但是，它不会用于字符串（基本类型不可变，作为值传递），因为服务只返回它的副本。

使用getter / setter方法而不是修改字符串（原始值）。

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

1 个答案: