0

アイテムのリストがあります。そのアイテムの1つをクリックすると、現在のオブジェクトを別のコントローラにコピーしてそこに表示する必要があります。私は2番目のコントローラのビューに表示されていない、私はなぜ表示されていない理解していない。角度付きコピーしたオブジェクトを別のコントローラにコピー

ここ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

あなたがあなたのサービスでセッター機能を持っていますが、あなたはまた、中のデータを取得するために、ゲッター機能を必要とし、以下のよう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>

0

を行うことができます新しいコントローラ。サービス内のデータを設定するときは、変数に格納します。あなたのゲッターから、その変数を返します。次に、ゲッター関数を呼び出す新しいコントローラーでスコープ変数を設定することができ、新しいコントローラーにデータを持ちます。

関連する問題