Directive not providing new data on different page template

I created a simple directive that uses the state param of a product landing page to generate content specific to the product. It works great on the very first item I load up. All other items however are stuck with what was done on the first pass.

so if I have 5 templates that use a <mydirective></mydirective> they all use the data from the first template that executed the directive. As well if I pass any other products to the same template, the directive content doesn’t update.

Hmmm seems more like an angular JS issue here.

Can you provide the code of your directive ?


.directive('mydirective', function($stateParams){
  var x = $;

    restrict: 'E'
    template: x

Will always return the id of the very first page to use the directive.

You probably need to not use $stateParams in a directive. You should probably be creating a directive with an isolate scope.


<my-directive content-id=""></my-directive>


angular.module('my.controllers').controller('MyController', function($scope, $stateParams) {
	$ = {
		"id" : $


.directive('myDirective', function() {
	return {
		restrict : "E",
		scope : {
			contentId : "="
		template : scope.contentId