CODEWITHSUNDEEP
angularjsangularjs-directive
Nagaraja Thangavelu
Nagaraja Thangavelu

Reputation: 1168

Directives works with one controller but not with other controllers in Angular JS

I am new to angularJS. I am currently building a small mobile store where I display the data of all the products in the front page and onclicking the project, i wanted to show the gallery, description of the product in the next page.

When I click on the product, I was able to redirect to the next page with the values. But the issue here is, I have a directive called 'productGallery' which works on the front page (products-list.html), but it doesn't work on the next page (product.html).

My index.html

<div class="container">
<header>
<h1>My Mobile Store</h1>
</header>
<hr class="header-seperator">
<nav class="navbar navbar-default">
<div class="container-fluid">
 <div class="navbar-header">
    <a class="navbar-brand" href="#">My Mobile Store</a>
</div>
<div>
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Mobiles</a></li>
    <li><a href="#">Electronics</a></li>
    <li><a href="#">Fashions</a></li>
    <li><a href="#">Footwears</a></li>
  </ul>
  </div>
</div>
</nav>
<div ng-view></div>
</div>

My app.js

(function() {
var storeConfig = function($routeProvider) {
$routeProvider
.when('/', {
    controller: 'StoreController',
    templateUrl: 'views/products-list.html',
    controllerAs: 'StreCtrl'
})
.when('/product', {
    controller: 'ProductController',
    templateUrl: 'views/product.html',
    controllerAs: 'prodCtrl'
});
};

var app= angular.module('mystore',['ngRoute','store-directives']).config(storeConfig);  
app.service('sharedProperties', function () {
    var product = [];

    return {
        getProduct: function () {
            console.log(product);
            return product;
        },
        setProduct: function(value) {           
            product = value;
            //console.log(product);
        }
    };
});

 app.controller('StoreController',[ '$http','$rootScope','sharedProperties', function($http,$rootScope,sharedProperties) {
 var store = this;
 $rootScope.products = [];
 store.error = "false";
 store.item = [];

 $http.get('data/products.json').success(function(data) {
    $rootScope.products = data;
 }).error(function() {
     store.error = "true";
 });

 store.showProduct = function(product) {
    sharedProperties.setProduct(product);
 };
 store.item = sharedProperties.getProduct();
 }]);


app.controller('ProductController',['$scope','$rootScope','$location','$routeParams', function($scope,$rootScope,$location,$routeParams) {
 $scope.product = $rootScope.products[$routeParams.id];
}]);

My directives.js

var app = angular.module('store-directives',[]);

app.directive("productGallery", function() {
  return {
    restrict: 'E',
    templateUrl: "views/product-gallery.html"
  };

});

My products-list.html

<div class="row">
<div class="col-md-4" ng-hide="StreCtrl.error" ng-repeat="product in products | orderBy :'-price'">
<img class="img-product thumbnail" ng-show="product.images.length" ng-src={{product.images[0]}}  />
  <h3><a href="#/product/{{$index}}" ng-click="StreCtrl.showProduct(product)">{{product.name}} </a></h3>
  <p>{{product.price | currency}}</p>
  <p>{{product.description}}</p>
  <product-gallery></product-gallery>
</div>
</div>

My product.html

<div class="row">
<h1> On Particular Product Page</h1>
<h3>{{product}}</h3>
    <product-gallery></product-gallery>
</div>

The work in products-list.html but not in product.html. I couldn't find out the mistake what I am doing. Any help will be grateful.

Thanks in Advance!!

Upvotes: 0

Views: 573

Answers (2)

Nagaraja Thangavelu
Nagaraja Thangavelu

Reputation: 1168

I am sorry!! I think the problem is with the browser cache.

When I restarted the browser, I found everything works fine. Infact, I don't store any cookies to my browser and I found that this is a weird behavior.

Just like to know whether its common with angular or its a issue with my browser.

Upvotes: 1

manasi sakhare
manasi sakhare

Reputation: 1051

I think there is a mistake in the way you have given the storeConfig. You have passed StoreController to both your url paths. It should be like:

var storeConfig = function($routeProvider) {
$routeProvider
.when('/', {
    controller: 'StoreController',
    templateUrl: 'views/products-list.html',
    controllerAs: 'StreCtrl'
})
.when('/product', {
    controller: 'ProductController',
    templateUrl: 'views/product.html',
    controllerAs: 'prodCtrl'
});
};

Upvotes: 0

Related Questions