我有一个项目列表，如果我点击其中一个项目，当前对象应该被复制到另一个控制器并显示在那里，我已经创建工厂来保存被点击的项目，但是没有显示在第二个项目中控制器视图，我不明白为什么不显示。
这是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>
答案 0 :(得分：0)
您可以执行以下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>
答案 1 :(得分：0)
您的服务中有一个setter函数，但您还需要一个getter函数来检索新控制器中的数据。在服务中设置数据时，将其存储在变量中。然后从你的getter返回那个变量。然后，您可以在新控制器中设置范围变量，该变量调用getter函数，现在您将在新控制器中获得数据。