在Angular Service中获取数据并将其传递给另一个控制器

时间:2015-12-17 09:05:02

标签: javascript angularjs

我不知道这是解决问题的正确方法,如果你有更好的想法或maby更有效的方式来做到这一点我都是开放的东西:)。我知道我也可以通过广播价值来做到这一点,但我想使用该服务根据获得的值更改和修改数据。我有点简化它只希望它已经有效。

所以发生了什么,我通过点击向服务发送了一个值:

$scope.newName = function(name) {
    nameService.newName(name);
};

比将值接收到我的服务中并尝试将其发送到另一个控制器:

    var placeHolderName = 'anonymouse';
    var name = [];

    return {
        newName: function (repsonse) {
            placeHolderName = 'noAnonymouse'
            name = 'hi new' + repsonse;
        },

        getNewName: function() {

            if (placeHolderName === 'anonymouse') {
                return placeHolderName;
            }
            else {
                return name;
            }
        }
    };

但是你可以看到,如果没有传递任何值,它只包含' anonymouse' name一旦传递了新值,就不再需要占位符变量了。

并尝试更新' anonymouse' name通过服务传递新值后,它会使用新值更新$ scope。 我用它取了它:

$scope.name = nameService.getNewName();

$scope.$watch('name', function(newValue, oldValue) {
    console.log(newValue, oldValue);
});

遗憾的是,我在这里尝试使用它的方式并不起作用。

1 个答案:

答案 0 :(得分:1)

根据codepen更新了答案:

您应该关注name

的更改,而不是观看service.getName



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

app.controller('sendController', function($scope, service) {
  $scope.newName = function(name) {
    service.setName(name);
  };
});

app.controller('getController', function($scope, service) {
  $scope.name = service.getName();
  $scope.$watch(service.getName, function(newValue, oldValue) {
    $scope.name = newValue;
  });
});

app.factory('service', function() {
  var name = 'anonymouse';
  return {
    setName: function(newName) {
      name = newName
    },
    getName: function() {
      return (name === 'anonymouse') ? name : 'hi new' + name;
    }
  }
});
var el = document.getElementById('container');
angular.bootstrap(el, ['test']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="container">
  <div ng-controller="sendController">
    <button ng-click="newName('bob')">Bob</button>
    <button ng-click="newName('Dennis')">Dennis</button>
  </div>

  <div ng-controller="getController">
    {{ name }}
  </div>
</div>
&#13;
&#13;
&#13;

您还可以删除$scope.$watch并执行$scope.name = service.getName;并将表达式更新为{{ name() }}

如果我理解正确,你可以这样做:

  var name = 'Anonymous';
  return {
   setName: function(newName) {
     name = newName
   },
   getName: function() {
     return (name === 'Anonymous') ? name : 'hi new' + name;
  };