項目のリストがあり、そのうちの 1 つをクリックすると、現在のオブジェクトが別のコントローラーにコピーされ、そこに表示されます。クリックした項目を保存するためのファクトリを作成しましたが、2 番目のコントローラー ビューに表示されません。が表示されない理由がわかりません。
これがplnkrです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>