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
– MadeOfSport

2014-08-31 13:00:20 +00:00
Commented Aug 31, 2014 at 13:00 — MadeOfSport
– MadeOfSport, Commented Aug 31, 2014 at 13:00
Can you make a plnkr to demonstrate the problem?

Dhruv Chandna
– Dhruv Chandna

2014-08-31 13:45:45 +00:00
Commented Aug 31, 2014 at 13:45 — Dhruv Chandna
– Dhruv Chandna, Commented Aug 31, 2014 at 13:45

Yannick Serra · Accepted Answer · 2014-09-01 13:18:27Z

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 1, 2014 at 13:18

Yannick Serra

3801 gold badge3 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MadeOfSport Over a year ago

Hey, i now have a working plnkr where i can show the problem: 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?

Yannick Serra Over a year ago

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 and take care of not using ng-init to initialize a controller (as explained here )

Kalhan · Accepted Answer · 2014-08-31 14:45:45Z

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, 2014 at 14:45

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

4 Comments

MadeOfSport Over a year ago

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 ???

Kalhan Over a year ago

do you have a controller for product-list.html ?

MadeOfSport Over a year ago

yes i have a controller called SearchController. I've updates my question and wrote the relevant code under: Update controllers.js

Kalhan Over a year ago

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

Collectives™ on Stack Overflow

Directive not rendering after $http request

2 Answers 2

2 Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Linked

Related