CODEWITHSUNDEEP
jqueryhtmlangularjs
Stephane
Stephane

Reputation: 79

Pass value scope to another

For now, i have a controller which allow to get data (json) from database, with a search input.

var app = angular.module('myApp',[]);

app.controller('MailCtrl',function($scope,itemFactory){
    $scope.init = function(){
         $scope.items = {};
         var search = $('#input').val();
         mailFactory.getItems(search).success(function(data){
             $scope.items = data;
         });
    }
    $('#input').keyup(function(){
         $scope.init()
    });


});

app.factory('itemFactory', function($http){
    var factory = {};
    factory.getItems = function(search) {
        return $http.get("/admin/get_saved_items/?search="+search);
    }
return factory;
)};

This controller allows to populate a list with only the username (displayed). but data from database looks like 

[{"username" : "username1","first_name":"first_name1","last_name":"last_name1"},
{"username" : "username2","first_name":"first_name2","last_name":"last_name2"},..]

What I would like to do is on click on one element of this list populate an other $scope to populate a table with (username, first_name,last_name). Moreover, when the search input is cleared to search an other username. The table keeps data and it's possible to add more entries on the table

More INFO

My template looks like

 %div{:ng=>{:controller=>'MailCtrl'}}
      %div.col-lg-6
           %input.form-control#unsername{:name =>'unsername',:type=>'text', :value=>parameters['unsername'],:autocomplete => "off"}

      %div.col-lg-6
           %ul{:ng=>{:repeat=>"item in items"}}
                 %li
                     {{ item.username }}

 %div.form-group{:ng=>{:controller=>'userCtlr'}}
      %table.table.table-bordered#table_user
           %tr
                %th
                   Username
                %th
                   first name
                %th
                   last name
           %tr{:ng=>{:repeat=>"user in users"}}
                 %td
                   {{user.username}}
                 %td
                   {{user.first_name}}
                 %td
                   {{user.las_name}}

Upvotes: 0

Views: 85

Answers (1)

Artyom Pranovich
Artyom Pranovich

Reputation: 6962

Use a shared service and inject it to any controllers:

    angular.module("yourAppName", []).factory("mySharedService", function(){

        var mySharedService = {};

        mySharedService.values = {};

        mySharedService.setValues = function(params){
            mySharedService.values = params;
        }

        return mySharedService; 
   });

And after inject it to controller. For example:

function MainCtrl($scope, mySharedService) {
  var obj = $scope.someObj; 
  mySharedService.setValues(obj);
}

function AdditionalCtrl($scope, mySharedService) {
  $scope.var2= myService.values;
}

UPDATE: for Stef comment. If you want pass loaded data from one controller to another controller, you can call passing function in ng-click() and broadcasting needed event from sharedService.

View:

<input ng-model="someModel" ng-click="passData(items)">

FirstController:

 function FirstCtrl($scope, mySharedService) {
      $scope.passData(params){
         mySharedService.setValues(params);
      }
 }

SharedService:

    angular.module("yourAppName", []).factory("mySharedService", function($rootScope){

        var mySharedService = {};

        mySharedService.values = {};

        mySharedService.setValues = function(params){
            mySharedService.values = params;
            $rootScope.$broadcast('dataPassed');
        }

        return mySharedService; 
   });

SecondController:

 function SecondController($scope, mySharedService) {
    $scope.$on('dataPassed', function () {
        $scope.newItems = mySharedService.values;
    });
 }

Upvotes: 1

Related Questions