CODEWITHSUNDEEP
javascriptscopeangularjs
Teo.sk
Teo.sk

Reputation: 2627

AngularJS $scope updates not reflected in the view

Firstly I am sorry if I will be confusing, but I'm solving this issue the whole evening, and I've read dozens of SO questions and AngularJS articles, so I'm not even sure now if I know where's the problem :)

I have an ng-app, where in the controller when I define default data for few properties of $scope, the view stops getting updated when this data changes later on programatically.

Here's a short example of my code:

...
config(['$routeProvider', function($routeProvider) {
$routeProvider.
    when('/abc/:letter', {templateUrl: template, controller: FilterCtrl}).
    otherwise({redirectTo: '/abc/a'});
}])
...

Controller: 

function FilterCtrl($scope, $http, $routeParams) {

    $scope.mainfilter = $routeParams.letter;
    $scope.listItems = $http.post($scope.url, {'filterType': 'abc', 'letter': $routeParams.letter});

    $scope.searchTitle = function(search) {
        $scope.mainfilter = 'Film: ';
        //just test code to see if the data changes, will be other http call actually
        $scope.listItems = $http.post($scope.url, {'filterType': 'abc', 'letter': 'n'});
    }
}

Main markup, where the view is defined (Symfony2, ignore the twig logic pls):

    ...
    <div class="sort cell-1022 transparent-gray-back overflow-fix">

        <span class="sort--title">Search by</span>

        <select class="sort--selected chzn-select" ng-model="searchtitle" ng-change="searchTitle(searchtitle)">
            <option value="">film title</option>
            {% for id,title in titles %}
                <option value="{{ id }}">{{ title }}</option>
            {% endfor %}
        </select>

    </div>

</div>

<div class="divider transparent"></div>

<article class="wrapper">
    <div class="transparent-gray-back" ng-view>


    </div>

</article>

The crucial part of the template:

<div class="scroll-list nice-scrollbars" >

    <span class="heading">{{ mainfilter.toUpperCase() }}</span>
    <ul class="item-list">
        <li ng-repeat="item in listItems.data | orderBy:order | filter:filter">
            <a ng-click="getRelated(item._id)">{{ item.title }}</a>
        </li>
    </ul>

</div>

The main problem is, when I have the first 2 lines of controller there, the data is correctly initialized depending on route params, but after executing searchTitle() it's not updated. When I remove the first two lines, the data defined by the route isn't pulled (obviously), but the searchTitle() method correctly populates both mainfilter field and the repeated <li>s. I'm desperate, I suggest something is wrong with the scope, but currently I'm information overloaded, and would appreciate your help, SO!

Upvotes: 3

Views: 4130

Answers (2)

Teo.sk
Teo.sk

Reputation: 2627

Wrapping the initial "state" / defaults for the controller into a function, and calling it upon $viewContentLoaded event helped. Here's my fix:

$scope.$on('$viewContentLoaded', $scope.init);

$scope.init = function() {
    $scope.mainfilter = $routeParams.letter;
    $scope.listItems = $http.post($scope.url, {'filterType': 'abc', 'letter': $routeParams.letter});
}

I still have no idea why if the default data was set only by assigning values right in the controller code was causing the view to be "stuck" to this data, so I'm willing to re-accept a better answer, explaining this voodoo.

Upvotes: 1

asgoth
asgoth

Reputation: 35829

Can you try the following?

Change the way you are using $http.post (at both places). Try to use it like:

$http.post($scope.url, {'filterType': 'abc', 'letter': $routeParams.letter}).success(function(data) {
   $scope.listItems = data;
});

This means your ng-repeat changes slightly:

ng-repeat="item in listItems"

Upvotes: 0

Related Questions