How to display the output of function in a controller to nested view in angularjs

Question

I have a parent view index.html

 <html>
  <head>
    <script src = "assets/js/angular.min.js"></script>
    <script src = "../lib/js/angular-ui/angular-ui-router.js"></script>
    <script src = "app.js"></script>
    <script src = "controllers/profile/ProfileController.js"></script>
  </head>

  <body ng-app="myApp">
     <div class="links">
       <div class='profile'><a ui-sref="profile">Profile</a></div>
       <div class='dashboard'><a ui-sref="dashboard">Dashboard</a></div>
     </div>
     <div class="container">
        <div ui-view></div>
     </div>
   </body>
   </html>

In app.js

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

   app.config(['$stateProvider', '$urlRouterProvider',function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('profile', {
            url: "modules/profile/templates",
            templateUrl: "modules/profile/templates/profile.html",
            controller: 'ProfileController'
        }).state('dashboard', {
            url: "modules/dashboard/templates",
            templateUrl: "modules/dashboard/templates/index.html"
        }).state('profile.viewprofile', {
            url: "modules/profile/templates",
            templateUrl: "modules/profile/templates/viewprofile.html",
            controller: 'ProfileController'
        }).state('profile.createprofile', {
            url: "modules/profile/templates",
            templateUrl: "modules/profile/templates/createprofile.html",
            controller: 'ProfileController'
        });
    }
]);

This is my profile.html

 <div >
   <div class="links">
    <h3 class="heading">Profile</h3>
       <div class='viewprofile'><a ui-sref="profile.viewprofile">View Profile</a></div>
       <div class='createprofile'><a ui-sref="profile.createprofile">Create Profile</a></div>
       <div class='editprofile'><a ui-sref="profile.editprofile">Edit Profile</a></div>
    </div>
    <div class="content>
       <div ui-view="profile.viewprofile@"></div>
       <div ui-view="profile.createprofile@"></div>
     </div>
   </div>

in my ProfileController

app.controller('ProfileController',function($scope, $http){
        $scope.allProfiles = function(){
       $http.get('objects/getallprofiles.php').success(function (data, status, headers, config) {
    console.log(data);
    });
}

In console the data displayed is

Array
(
    [0] => Array
    (
        [id] => 1
        [0] => 1
        [fname] => sdds
        [1] => sdds
        [lname] => sddssd
        [2] => sddssd
        [mobile] => 333
        [3] => 333
    )
)

When I click on viewprofile in profile.html page the viewprofile.html is getting rendered. But, I want to get the values of the function allProfiles() to the child view viewprofile and bind them to html tags

How can I get the allProfiles() function output which is in controller to the child view viewprofile.html

Here should be the answer for you stackoverflow.com/q/27696612/1679310 — Radim Köhler
– Radim Köhler, Commented Jun 19, 2016 at 16:26

Dale K · Accepted Answer · 2019-04-29 04:35:34Z

1

You can bind data inside allProfile() function to some rootScope variable. Like this:

$scope.allProfiles = function(){
       $http.get('objects/getallprofiles.php').success(function (data, status, headers, config) {
      $rootScope.profiles=data;
    console.log(data);
    });

And then you can access this variable in any controller you want using $rootScope.

Don't forget to inject $rootscope in cotroller.

Another way of doing this is to store data in service and inject the service in a controller you want to access data.

edited Apr 29, 2019 at 4:35

Dale K

28.1k15 gold badges59 silver badges85 bronze badges

answered Jun 19, 2016 at 16:23

Ninad

4332 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rji rji Over a year ago

it's not working. I am not even getting any alert if I put inside allProfiles() function

rji rji Over a year ago

I am very new to angularjs. Will you please show how to store data in service and inject the service in a controller

Collectives™ on Stack Overflow

How to display the output of function in a controller to nested view in angularjs

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related