0

我有一个项目列表，如果我单击其中一个，当前对象应该被复制到另一个控制器并在那里显示，我已经创建了工厂来保存单击的项目，但没有显示在第二个控制器视图中，我不明白为什么不显示。

这是 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>
4

2 回答 2

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>

于 2016-11-05T23:52:03.910 回答
0

您的服务中有一个 setter 函数，但您还需要一个 getter 函数来检索新控制器中的数据。在服务中设置数据时，将其存储在变量中。然后从你的吸气剂返回那个变量。然后你可以在你的新控制器中设置一个调用getter函数的范围变量，现在你将在新控制器中拥有数据。

于 2016-11-06T04:02:27.627 回答