Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

I am having an issue displaying response data, returned from my factory,inside an ionic view page. I believe the issue has something to do with the way I am handling the promise, but I cannot pinpoint why. So to start the roadmap to my problem, here is my:

Factory

.factory('profileFactory', function ($http, $q) {
var config = {
    headers: {
        'MyKey': 'myvalue'
    }
};
this.getEmployee = function (userId) {
    return $http.get('http://someurlpathtogoto' + userId + 'etc', config).then(function (response) {
        console.log(response.data)
        return response.data;
    })
}
return this;
})

The above code returns the JSON object I need for my controller so:

Controller

.controller('EmployeeCtrl', ['$scope', 'profileFactory', function ($scope, profileFactory) {

//Set back to false
$scope.profileLoaded = true;
$scope.serviceUnavailable = false;  

$scope.setId = function (userId) {

    profileFactory.getEmployee(userId).then(function(arrItems){
        $scope.employee = arrItems;
        $scope.firstName = $scope.employee.record[0].First_Name;
        $scope.lastName = $scope.employee.record[0].Last_Name;
    };
}])

Now when my page displays I want it to look like such:

Ionic View (Profile)

<ion-view view-title="Profile" ng-controller="EmployeeCtrl" hide-nav-bar="true">
<ion-pane>
    <!-- TODO: BACK BUTTON, NO TITLE -->
    <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
    </ion-header-bar>
    <ion-content>
        <div ng-show="serviceUnavailable">
            Directory service unavailable
        </div>
        <div ng-show="profileLoaded">
            <br />
            <center><img class="focus-img-circle" ng-src="default.png" /></center>
            <center><b>{{firstName}} {{lastName}}</b></center>
        </div>
     </ion-content>
 </ion-pane>
<ion-view>

All of this is invoked whenever a user presses on an arrow button in the app which should take them to their profile page to view some info. The following code appears in the previous view.

Ionic View (Search Results)

<ion-item class="item item-avatar item-button-right" ng-repeat="user in results" ng-controller="EmployeeCtrl">
            <img ng-src="data:image/png;base64,{{user.pic}}">
            <strong>{{user.first_name}} {{user.last_name}}</strong>
            <div class="buttons" style="padding:20px;">
                <button type="button" class="button button-icon ion-ios-telephone-outline customSearchIcon" ng-click=""></button>
                <a class="button button-icon ion-ios-arrow-right customSearchIcon" ng-click="setId(user.id)" href="#/tab/search/profile"></a>
                <button type="button" class="button button-icon ion-ios-heart-outline customSearchIcon" ng-click="addFavorite(user.id, user.first_name, user.last_name, user.pic)"></button>
            </div>
        </ion-item>

So essentially a user clicks on a persons tab, takes them to that profile where my factory is used to make a RESTful call to return a JSON object containing data about that user. Except nothing is being displayed in the Ionic View. If I hard code a userId in the controller and take away the function setId() it works but that obviously isn't an option. Does anyone see anything specifically that I am doing wrong? Been stuck on this for hours any help would be great.

I left a lot of code out to get my point across.

EDIT

The two views you see are different ionic templates. So using ng-controller="EmployeeCtrl is not happening twice in the same view.

share|improve this question
up vote 1 down vote accepted

The mistake is, on arrow click, you call the service and store the data to scope variable and then navigates to second view. The second view though uses the same controller as the first view, a new controller is being instantiated with empty scope - and hence your view is empty.

Instead of ng-click in <a> tag, modify your profile route to pass the userid as well - tab/search/profile/:userid and in anchor tag have ng-href= "#/tab/search/profile/{{user.id})" and in your profile controller get the userid from query string ($location.search().userid) and make the Ajax call.

share|improve this answer
    
thank you for the quick response! Going to take a look into this now and will get back to you on it. I had done some reading about the state in which the view is in and how that could effect the scope so that makes much more sense now. Will get back to you shortly. – Sam5487 Sep 19 '16 at 18:03
    
Thank you for the help. You were completely right about the new controller being instantiated with an empty scope even though I thought it wasn't. I did a workaround by simply adding the code to my SearchCtrl. Obviously I do not want to do it this way in the future and use the approach you suggested, but for a simple POC this will work thank you. – Sam5487 Sep 19 '16 at 18:59
    
@Sam5487 - Glad I helped! Happy coding... – Developer Sep 20 '16 at 0:16

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.