Angular:将数据传递给另一个控制器的服务 [英] Angular: Service to Pass Data To Another Controlelr

问题描述

所以，我有一个重复 ng 的项目列表.

人员姓名

我想创建一个服务，在其中单击时，我可以收集那个 person.id 并将其传递给不同路由中的另一个控制器.

这通常很简单，只需使用 url 和 route 参数，但是，在这种情况下，重要的是不要在浏览器 url 中暴露 person.id.

-- 更多上下文

无论是否提供服务，我都需要在人员列表页面上通过 ng-repeat 提取一个 {{person.Id}} 数据.

单击时，我从人员控制器移动到带有人员"控制器的新路线.我需要那个人"控制器能够拉出在之前的路线上点击的 {{Person.ID}} 以便在数据库中查找那个人.

任何帮助都会很棒！

解决方案

服务并不意味着直接与 DOM 元素交互.DOM 应该与指令/控制器交互.控制器应与模型交互.

下面的示例演示了从控制器 1 向 myFactory 发送数据，然后控制器 2 从 myFactory 获取值.

 angular.module('app', []).factory('myFactory', myFactory).controller('myCtrl1', myCtrl1).controller('myCtrl2', myCtrl2);函数 myFactory() {var fromSender = null;返回 {setSender:函数(发送者){fromSender = 发件人；},getSender:函数(){从发件人返回；}};}函数 myCtrl1(myFactory) {var vm = 这个；vm.setSender = myFactory.setSender;}函数 myCtrl2(myFactory) {var vm = 这个；vm.getSender = myFactory.getSender;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script><div ng-app="app"><div ng-controller="myCtrl1 as ctrl1">控制器 1:<br><button ng-click="ctrl1.setSender('from controller 1')">发送到 myFactory</button>

<小时><div ng-controller="myCtrl2 as ctrl2">控制器 2:<br>ctrl1 通过 myFactory 的值:{{ctrl2.getSender()}}

So, I have a ng-repeated list of items as such.

<li><a ng-click="{{person.id}}">Name of Person</a></li>

I would like to create a service wherein, on click, I can collect that person.id and pass it to another controller in a different route.

This would normally be very simple by just using the url and route params, however, in this case it is important that the person.id not be exposed within the browser url.

-- More Context

Whether service or not, I am needing to extract a {{person.Id}} that is data available via an ng-repeat on a list page of persons.

On click, I move from a persons controller to a new route with a "person" controller. I need that "person" controller to be able to pull the {{Person.ID}} that was clicked on the previous route in order to look up that person in a DB.

Any help would be really great!

解决方案

Services aren't meant to interact directly with DOM elements. DOM should interact with directives/controllers. Controller should interact with models.

This example below demonstrates sending data from controller 1 to myFactory and then controller 2 gets it the value from myFactory.

  angular
    .module('app', [])
    .factory('myFactory', myFactory)
    .controller('myCtrl1', myCtrl1)
    .controller('myCtrl2', myCtrl2);

  function myFactory() {
    var fromSender = null;
    return {
      setSender: function(sender) {
        fromSender = sender;
      },
      getSender: function() {
        return fromSender;
      }
    };
  }

  function myCtrl1(myFactory) {
    var vm = this;
    vm.setSender = myFactory.setSender;
  }

  function myCtrl2(myFactory) {
    var vm = this;
    vm.getSender = myFactory.getSender;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>

<div ng-app="app">
  <div ng-controller="myCtrl1 as ctrl1">
    Controller 1: <br>
    <button ng-click="ctrl1.setSender('from controller 1')">Send to myFactory</button>
  </div>
  <hr>
  <div ng-controller="myCtrl2 as ctrl2">
    Controller 2: <br>
    value from ctrl1 via myFactory:  {{ctrl2.getSender()}}
  </div>
</div>

这篇关于Angular:将数据传递给另一个控制器的服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！