CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Alexis Vera
Alexis Vera

Reputation: 357

Angular multiple instances of same directive, scope is not isolated , same scope

I am using the directive multiple times on the page like

$scope.stylusright[0] = 330;

var appendHtml = $compile('<directive-history rightstylus="{{stylusright[0]}}"></directive-history>')($scope);

$element.append(appendHtml);

$scope.stylusright[1] = 660;

var appendHtml = $compile('<directive-history rightstylus="{{stylusright[1]}}"></directive-history>')($scope);

$element.append(appendHtml);

My directive looks like

angular.module('mymodule').directive('directiveHistory', function ($compile)
{
return {
restrict: 'E',
scope: true,
transclude: true,
templateUrl: 'directive.history.html',
scope: {
rightstylus: "@",
}, 
...

My Problem is, when the same directive is added to the same page multiple times, their scope becomes same. when I change $scope.stylusright[1] in 2st directive it also makes changes in all other directives.

Upvotes: 2

Views: 1872

Answers (1)

Alexandre Poletto
Alexandre Poletto

Reputation: 146

Your directive code doesn't look wrong, (only you have duplicate scope keys).

Take a look at this Plunker, it is something similar to what you want to do with isolated scope directives.

Hope it helps.

Upvotes: 0

Related Questions