CODEWITHSUNDEEP
angularjsangularjs-directive
MadeOfSport
MadeOfSport

Reputation: 513

Directive not rendering after $http request

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

Upvotes: 0

Views: 728

Answers (2)

Yannick Serra
Yannick Serra

Reputation: 370

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

Upvotes: 1

Kalhan.Toress
Kalhan.Toress

Reputation: 21901

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 :)

Upvotes: 0

Related Questions