Directive not providing new data on different page template


#1

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.


#2

Hmmm seems more like an angular JS issue here.

Can you provide the code of your directive ?

Hakan.


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

  return{
    restrict: 'E'
    template: x
  }
})

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


#4

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

HTML:

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

Controller:

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

Directive:

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