多次调用时,Angular服务会覆盖自身

时间:2016-09-19 18:24:43

标签: javascript angularjs angularjs-directive

我有一个聊天组件,其中包含该聊天的哈希ID。我所有的api调用(由服务完成)都有一个哈希值。当我两次调用我的聊天组件时,第一次聊天的服务哈希值会被秒聊天覆盖。



angular.module('testModule', [])
  .controller('testController', function(testService, $scope) {
    var vm = this;

    vm.init = function() {
      vm.hash = vm.hash();
      testService.setHash(vm.hash);
    }

    vm.getServiceHash = function() {
      vm.serviceHash = testService.hash;
    }

    vm.init();
  })
  .service('testService', function() {
    var testService = {
      hash: null
    };

    testService.setHash = function(hash) {
      testService.hash = hash;
    }

    return testService;
  })
  .directive('test', function() {
    return {
      restrict: 'E',
      template: $("#test\\.html").html(),
      controller: 'testController',
      controllerAs: 'test',
      bindToController: {
        hash: '&',
      },
      scope: {}
    }
  });

var app = angular.module('myApp', ['testModule']);
app.controller('myController', function($scope) {})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>

<body>
  <div ng-app="myApp" ng-controller="myController">
    <test hash="'123'"></test>
    <test hash="'321'"></test>
  </div>

  <script type="text/ng-template" id="test.html">
    <p>
      <h2> Controller hash: {{test.hash}} </h2>
      <button type="button" ng-click="test.getServiceHash()">Get service hash</button>
      <h2> Service hash: {{test.serviceHash }} </h2>
    </p>
  </script>

</body>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

正如@jjmontes在评论中指出的那样,服务是Angular中的单身人士。因此,除非该州适用于所有消费者,否则他们不应维持任何州。例如,可以检索适用于所有消费者的一组公共数据,然后由所有人使用,而不是再次进行潜在的昂贵调用。但是,任何特定于控制器的数据都应该在控制器中维护并按需传递给服务。

特别是在您的情况下,您应该将其作为参数传递给控制器​​实例调用的服务方法,而不是在服务上设置哈希值。

.service('testService', function() {
  var testService = {
  };

  testService.callService = function(hash) {
    // call an API or whatever, passing the hash
  }

  return testService;
})