角：服务将数据传递给另一个Controlelr [英] Angular: Service to Pass Data To Another Controlelr

问题描述

所以，我有一个项目这样的NG-重复列表。

 ＆LT;李＆GT;＆LT;一个NG点击={{person.id}}＆GT;人＆LT的名称; / A＆GT;＆LT; /李＆GT;
 

我想创建一个服务，其中，上点击，我可以收集person.id并把它传递到另一个控制器在不同的路线。

此通常会通过只使用url和路由PARAMS很简单，但是，在这种情况下，重要的是该person.id不是浏览器的URL内露出。

- 更多的上下文

不管是服务还是不行，我需要提取{{person.Id}}是通过人员名单页面上的NG-重复的数据。

在点击，我是从一个人的控制器移到新的路线与人的控制器。我需要一个人的控制器能够拉动{{Person.ID}}被点击了previous路线，以查找该人在DB的。

任何帮助将是真正伟大的！

解决方案

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

这下面的例子演示了从控制器1将数据发送到myFactory然后控制器2得到它从myFactory的价值。

\r

\r

角\r
    .module（'应用'，[]）\r
    .factory（'myFactory'，myFactory）\r
    .controller（'myCtrl1'，myCtrl1）\r
    .controller（'myCtrl2'，myCtrl2）;\r
\r
  功能myFactory（）{\r
    VAR fromSender = NULL;\r
    返回{\r
      setSender：功能（发送）{\r
        fromSender =发送;\r
      }，\r
      getSender：功能（）{\r
        返回fromSender;\r
      }\r
    };\r
  }\r
\r
  功能myCtrl1（myFactory）{\r
    VAR VM =这一点;\r
    vm.setSender = myFactory.setSender;\r
  }\r
\r
  功能myCtrl2（myFactory）{\r
    VAR VM =这一点;\r
    vm.getSender = myFactory.getSender;\r
  }

\r

＆LT;脚本SRC =htt​​ps://cdnjs.cloudflare.com/ajax /libs/angular.js/1.4.8/angular.js\"></script>\r
\r
＆LT; D​​IV NG-应用=应用程序＆GT;\r
  ＆LT; D​​IV NG控制器=myCtrl1为CTRL1＆GT;\r
    控制器1：＆LT; BR＆GT;\r
    ＆LT;按钮NG点击=ctrl1.setSender（'从控制器1'）＆GT;发送到myFactory＆LT; /按钮＆GT;\r
  ＆LT; / DIV＆GT;\r
  ＆LT;小时＆GT;\r
  ＆LT; D​​IV NG控制器=myCtrl2为CTRL2＆GT;\r
    控制器2：其中; BR＆GT;\r
    通过myFactory从CTRL1值：{{ctrl2.getSender（）}}\r
  ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

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>

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