Directive not rendering after $http request

Question

I began working with angularjs and have a problem.

app.js (just the relevant route)

$routeProvider.when('/search', {templateUrl: 'partials/search-results.html', controller: 'SearchController', title: 'Product Search'});

search-results.html

<div product-list></div>

index.html

<div class="page_content_offset p_bottom_0">
    <div class="container mh600">
         <div ng-view></div>
    </div>
</div>

product-list.html

<div ng-repeat="item in items">
    <p>{{item.address_components[0].long_name}}</p>
  </div>

controller.js just relevant code:

$scope.search = function() {

$scope.loading = true;
$scope.items = {};

ProductSearchService.searchItems($scope.term).then(function(data) {
  $scope.items = data;
  $scope.loading = false;
});
};

directives.js (just relevant code)

directive('productList', function() {
        return {
            restrict: 'EA',
            templateUrl: 'partials/list/product-list.html'
        };

My Problem now is: The ProductSearchService loads the data. But the directive not rendering as expected.

If i move the directive code from search-results.html to my index.html like this:

 <div class="page_content_offset p_bottom_0">
      <div class="container mh600">
       <div product-list></div>
       <div class="clearfix"></div>
      </div>
 </div>

evrything is rendered nicely. So i think i included my directive wrongly or forgot something important.

I've created a plunkr similar to my setup:

http://plnkr.co/edit/60dvyFnz74yrsK12J2J4?p=preview

Everything works fine in that.

In my local application i changed the "product-list.html" model property access to this

<div ng-repeat="item in $parent.items">
    <p>{{item.address_components[0].long_name}}</p>
  </div>

Update controllers.js

angular.module('myApp.controllers', [])
.controller('SearchController', ['$scope','$http','ProductSearchService', function($scope, $http, ProductSearchService) {

                $scope.items = {};

                $scope.search = function() {

                    $scope.loading = true;

                    ProductSearchService.searchItems($scope.term).then(function(data) {
                        $scope.items = data;
                        $scope.loading = false;
                    });
                };
}]);

Update 2: I now have a plnkr where the problem can be shown: http://plnkr.co/edit/QgU1cf3JeJYKu6Fkl9zv?p=preview

no console error appears – MadeOfSport Aug 31 '14 at 13:00 — MadeOfSport, Aug 31 '14 at 13:00
Can you make a plnkr to demonstrate the problem? – Dhruv Chandna Aug 31 '14 at 13:45 — Dhruv Chandna, Aug 31 '14 at 13:45

score 1 · Accepted Answer · answered Sep 01 '14 at 13:18

1

You did not set any scope attribute to your directive. This means that your directive use the defining/containing scope as the directive own scope. Thus , the scope that is used in product-list.html is the same as the one used by search-result.html (and so by the SearchController).

The only reason , you could have to use the $parent.items would be if you specified scope:{}, in your directive.You can even test it in your plunker (I did). Can you double check the directive scope attribute ?

Thx

answered Sep 01 '14 at 13:18

Yannick Serra

326
2
11

Hey, i now have a working plnkr where i can show the problem: http://plnkr.co/edit/QgU1cf3JeJYKu6Fkl9zv?p=preview If i remove the $scope.items = {}; statement from my SearchController the scope then seems to be the same and i don't have to use $parent. But im still confused? – MadeOfSport Sep 01 '14 at 18:49
In your plnkr you use 2 searchController: one for index.html (in body ng-controller="SearchController") and one for search-result.html (in your $routeProvider config). But you only call the search function of index.html (in ng-init="init()").As a matter of fact , the uninitialized scope.items value of search-result.html is shadowing the valued scope.items definition of index.html.See my [version](http://plnkr.co/edit/PgbhWo0odLSHa850zSFM?p=preview) and take care of not using ng-init to initialize a controller (as explained [here](http://stackoverflow.com/a/15463124/1170805) ) – Yannick Serra Sep 02 '14 at 07:25

score 0 · Answer 2 · answered Aug 31 '14 at 14:45

0

directive('productList', function() {
    return {
        restrict: 'EA',
        replace: true,
        templateUrl: '<section data-ng-include=" 'partials/list/product-list.html' "></section>'

    };
});

try this one as the directive :)

answered Aug 31 '14 at 14:45

Kalhan.Toress

21,683
8
68
92

I found a solution which works but cant explain myself why this works. I changed the access to model proeprties from items to $parent.items. Now it works ??? – MadeOfSport Aug 31 '14 at 18:10
do you have a controller for `product-list.html` ? – Kalhan.Toress Sep 01 '14 at 03:59
yes i have a controller called SearchController. I've updates my question and wrote the relevant code under: Update controllers.js – MadeOfSport Sep 01 '14 at 11:56
that is the case data is in the enclosing controller of that so if u want to access a parent controller property u can user $parent or try something phototypical inheritace in javascript :) – Kalhan.Toress Sep 01 '14 at 12:58

Directive not rendering after $http request

2 Answers2

Linked