current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote 1 down vote favorite

It seems that my view variable is not updating on the onSubmit event. I can see in console that the performed call to an API gets the correct results, but I do not display them properly.

JS

     angular.module('FooApp')
     .controller('FooListController', ['$scope', 'FooMapper', 'moment', 'APP_URL', '$location', function($scope, FooMapper, moment, APP_URL, $location) {


         $scope.submit = function (){

             var promise = FooMapper.find($scope.fooName);

             console.log('-- Search string: '+ $scope.fooName);
             $scope.isLoading = 0;
             promise.then(function(foo){

                 console.log('New Promise foo: ', foo);
                 $scope.fooResults = foo;

             })
         } // end of anonymous function

}
]);

HTML

<div ng-include="APP_URL + '/view/fooResolver/searchForm.html'" ng-controller="FooListController">   </div>
    <div ng-if="!isLoading" class="row">

        <div ng-if="!fooResults" class="col-md-12">
            <div class="alert alert-warning">
                No foos found.
            </div>
        </div>

        <div ng-if="fooResults" class="col-md-12">

                        <tr ng-repeat="foo in fooResults" class="active">

                            <td>
                                {{foo.id}}
                            </td>
                            <td>
                                <b>{{foo.name}}</b>
                            </td>
                            <td>
                                {{foo.country}}
                            </td>
    ....

I have also tried with $scope.$apply() but still getting the same result. Is there any chance that I have more than one scopes around?

Thank you.

share|improve this question
    
looks correct to me, you need to make sure the return is an actual javascript object and that it is of the correct form – tommybananas Oct 6 '14 at 16:06
    
@snowman4415 The returned value is in correct format, I am also using FooResults: {{$parent.fooResults}} to check that I have the data, but no luck yet. DhanaKrishnasamy At the very end of the controller. – thitami Oct 6 '14 at 16:16
up vote 1 down vote

@Mohammad Sepahvand is correct about the new scopes created by using ng-if and ng-include, however, I would recommend you avoid using $parent. I think this can create code that is brittle and harder to maintain.

Child scopes inherit properties from parent scopes through prototypical inheritance. The "old" Angular saying about "putting a dot in your model" suggests you do something like this in the parent scope (in your controller):

$scope.model = { fooModel: null };

This declares a model object that will survive prototypical inheritance. Without having a "dot in your model" the properties of the child scopes will shadow the values in the parent scope.

When your $promise is resolved, you then set a new value on $scope.model.fooModel.

While this is effectively the same thing as using $parent.fooModel, using $parent means you're depending on this parent child relationship (it makes me feel dirty). What happens if you refactor the HTML view later resulting in more/less parent/child relationships?

share|improve this answer
    
Thanks for your detailed reply. Correct me if I am wrong, I have tried this in my Controller: $scope.model = { fooResults: null }; and does not work. Have I understood it incorrectly? Although, I am still not in position to see any results, the table layout has been appeared. – thitami Oct 6 '14 at 19:03
    
When the promise is resolved, do you then update $scope.model.fooModel to contain the new value? You also need to change the ng-repeat in the HTML to be ng-repeat="foo in model.fooModel" ... OOPS: I used "fooModel" when your code used "fooResults". But the concept is still correct. – Sunil D. Oct 6 '14 at 19:08
    
PS: You have other references to "fooResults" in your HTML that would also need to be changed to the new format: "model.fooResults" The point of this exercise is that b/c of prototypical inheritance you need to use an object, to avoid variables being "shadowed" when they are inherited in other scopes. – Sunil D. Oct 6 '14 at 19:11
    
I am probably missing something obvious. This is what I am declaring at the top of my controller: $scope.fooResults = { fooResults: null }; This is what I am assigning onSubmit and after retrieving the data: $scope.fooResults = foos; // foos is local variable, within the anonymous function, which contains my data. And now, I was expecting to be able to access {{fooResults}} in my HTML, which does not really happen. – thitami Oct 6 '14 at 19:31
    
The object you're declaring has two properties named fooResults, so after retrieving the data you want to assign a value to the inner property: $scope.fooResults.fooResults = foos; Then you need to access the data in the HTML using fooResults.fooResults. It would be more clear if you gave the outer property a different name :) – Sunil D. Oct 6 '14 at 19:49

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.