Angular将被点击的对象复制到另一个控制器
Angular Copy clicked object to another controller
我有一个项目列表，如果我单击其中一个，当前对象应该复制到另一个控制器并显示在那里，我已经创建了工厂来保存单击的项目，但没有显示在第二个控制器视图中，我不明白为什么不显示。
这是plnker https://plnkr.co/edit/hWjFJCJcq3vtvefzFMOy
和代码。
<!DOCTYPE html>
<html>
<head>
<title>Angucomplete</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body ng-app="myApp">
<div class="container">
<div class="container" ng-controller="ControllerOne">
<h3>Controller One</h3>
<table class="table">
<thead>
<th>Rol Id</th>
<th>Rol Name</th>
<th>Rol Activo </th>
<th>Acciones </th>
</thead>
<tbody>
<tr ng-repeat="rol in roles">
<td>{{rol.rolId}}</td>
<td>{{rol.rolName}}</td>
<td>{{rol.rolActivo}}</td>
<td><a href="#" ng-click="propiedades(rol)"> <span class="fa fa-search"></span> </a> </td>
</tr>
</tbody>
</table>
<pre>{{ rol }}</pre>
</div>
<div class="container" ng-controller="ControllerTwo">
<h3>Controller Two</h3>
RolId: {{ rol.rolId }} <br>
RolName: {{ rol.rolName }} <br>
RolActvio: {{ rol.rolActivo }} <br>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script>
var app = angular.module('myApp',[]);
app.factory('Data', function(){
return{
currentRol:{},
setCurrentRol: function(rol){
this.currentRol = rol;
console.log( 'Desde service set: ' + JSON.stringify( this.currentRol ) );
}
}
});
app.controller('ControllerOne', function($scope, Data){
$scope.propiedades = function(rol){
$scope.rol = rol;
Data.setCurrentRol(rol);
}
$scope.roles =[
{rolId: 1, rolName:"Administrador", rolActivo:"26/10/2016"},
{rolId: 2, rolName:"DBA", rolActivo:"25/08/2016"},
{rolId: 3, rolName:"Tester", rolActivo:"01/01/2016"},
{rolId: 4, rolName:"Ingeniero de Desarrollo", rolActivo:"12/11/2015"},
{rolId: 5, rolName:"Ingeniero de Pruebas", rolActivo:"06/03/2016"},
{rolId: 6, rolName:"Secretario", rolActivo:"06/03/2016"},
{rolId: 7, rolName:"VICE", rolActivo:"06/03/2016"},
{rolId: 8, rolName:"Arquitecto", rolActivo:"06/03/2016"},
];
})// Fin controller one
app.controller('ControllerTwo', function($scope, Data){
$scope.rol = Data.currentRol;
})// Fin controller two
</script>
</body>
</html>
您可以按照下面的方法做broadcast，
<!DOCTYPE html>
<html>
<head>
<title>Angucomplete</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body ng-app="myApp">
<div class="container">
<div class="container" ng-controller="ControllerOne">
<h3>Controller One</h3>
<table class="table">
<thead>
<th>Rol Id</th>
<th>Rol Name</th>
<th>Rol Activo </th>
<th>Acciones </th>
</thead>
<tbody>
<tr ng-repeat="rol in roles">
<td>{{rol.rolId}}</td>
<td>{{rol.rolName}}</td>
<td>{{rol.rolActivo}}</td>
<td><a href="#" ng-click="propiedades(rol)"> <span class="fa fa-search"></span> </a> </td>
</tr>
</tbody>
</table>
<pre>{{ rol }}</pre>
</div>
<div class="container" ng-controller="ControllerTwo">
<h3>Controller Two</h3>
RolId: {{ rol.rolId }} <br>
RolName: {{ rol.rolName }} <br>
RolActvio: {{ rol.rolActivo }} <br>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script>
var app = angular.module('myApp',[]);
app.factory('Data', function(){
return{
currentRol:{},
setCurrentRol: function(rol){
this.currentRol = rol;
console.log( 'Desde service set: ' + JSON.stringify( this.currentRol ) );
}
}
});
app.controller('ControllerOne', function($scope, $rootScope, Data){
$scope.propiedades = function(rol){
$scope.rol = Data.currentRol = rol;
Data.setCurrentRol(rol);
$rootScope.$broadcast('dataChanged');
}
$scope.roles =[
{rolId: 1, rolName:"Administrador", rolActivo:"26/10/2016"},
{rolId: 2, rolName:"DBA", rolActivo:"25/08/2016"},
{rolId: 3, rolName:"Tester", rolActivo:"01/01/2016"},
{rolId: 4, rolName:"Ingeniero de Desarrollo", rolActivo:"12/11/2015"},
{rolId: 5, rolName:"Ingeniero de Pruebas", rolActivo:"06/03/2016"},
{rolId: 6, rolName:"Secretario", rolActivo:"06/03/2016"},
{rolId: 7, rolName:"VICE", rolActivo:"06/03/2016"},
{rolId: 8, rolName:"Arquitecto", rolActivo:"06/03/2016"},
];
})// Fin controller one
app.controller('ControllerTwo', function($scope, Data){
$scope.rol = Data.currentRol;
$scope.$on('dataChanged', function() {
$scope.rol = Data.currentRol;
});
})// Fin controller two
</script>
</body>
</html>您的服务中有一个setter函数，但是您还需要一个getter函数来检索新控制器中的数据。在服务中设置数据时，将其存储在一个变量中。然后从getter返回那个变量。然后你可以在你的新控制器中设置一个作用域变量，它会调用getter函数，现在你就可以在新控制器中拥有数据了。
相关文章：
- 如何在android中使用phonegap将文件从一个文件夹移动/复制到另一个文件夹
- 如何将键入的文本从一个输入类型的文本复制到另一个
- 使用数据属性将HTML数据复制到另一个元素
- 可以't无法将一个字段复制到另一个字段
- jQuery将文本从span标记复制到另一个span标记
- 当我将子项从一个父项移动/复制到另一个父级时，如何重新计算显示
- 如何通过 JS 将内容从一个表单中的一个文本框复制到另一个表单中的另一个文本框
- 将搜索按钮从一个站点复制到另一个站点:此搜索按钮如何工作，以及如何重现其操作
- 如何使用谷歌应用程序脚本将3个谷歌电子表格中的特定行复制到另一个电子表格中
- Gulp.js - 无法将生成的文件从一个文件夹复制到另一个文件夹
- 当文档准备就绪时，将数据从一个文本框复制到另一个
- 将DIV内容复制到另一个DIV
- EXTJS 4.2:点击按钮，在新窗口中将选定的网格行从一个网格复制到另一个网格
- 如何在MVC3剃刀中将文本框值复制到另一个文本框中
- 是否可以将一个DOM元素转换为另一个?或者从中复制所有属性
- 两个表单，一个选择/下拉框-需要将选择值从一个表单复制到另一个表单
- 读取/写入/复制一个 ArrayBuffer 到另一个具有偏移量的 ArrayBuffer
- 将html输入文件元素从一个表单复制到另一个表单
- HTML将图像从画布复制到另一个画布
- 实时复制另一个文本框值 Jquery
