javascript - Angular Copy clicked object to another controller -
i have list of items , if click on 1 of them current object should copied controller , displayed there, i've created factory save clicked item, not being displayed in second controller view, dont understand why not showing.
here's plnker https://plnkr.co/edit/hwjfjcjcq3vtvefzfmoy
and code.
<!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 1 app.controller('controllertwo', function($scope, data){ $scope.rol = data.currentrol; })// fin controller 2 </script> </body> </html>
you can broadcast below,
<!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 1 app.controller('controllertwo', function($scope, data){ $scope.rol = data.currentrol; $scope.$on('datachanged', function() { $scope.rol = data.currentrol; }); })// fin controller 2 </script> </body> </html>
Comments
Post a Comment