Two instances of same directive overwrite each other
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I am using same directive for multiple instances of a toolbar. A toolbar has a button with a toggle functionality. So, if a first click does 'add' then another click does 'remove'. Here is a simplified directive that I am using:
a.directive("trendChartToolbar", function ($templateRequest, $compile) {
return {
scope: {
},
link: function (scope, elem, attrs) {
templateSRC = 'templateSRC.html';
$templateRequest(templateSRC).then(function (html) {
var template = angular.element(html);
$(elem).append(template);
template = $compile(template)(scope);
angular.element(elem).on('click', function (event) {
if (scope.state === undefined)
scope.state = true;
else
scope.state = !scope.state;
service.someMethod(event.target.name, scope);
});
});
}
};
});
Here is the template:
<div>
<img style="cursor:pointer;margin-right:10px" name="deviation"
src="image.svg" />
</div>
As long as only one instance of the directive exists everything works fine. scope.state changes from true to false and back. But if another instance exists then when I click on the first instance second time the scope has state property undefined. My expectation was that as long as I am using an isolated scope it would work. Any idea?
Thanks
angularjs
edited Nov 16 '18 at 18:07
georgeawg
34.7k115470
asked Nov 16 '18 at 17:03
MarkMark
91411437
|
show 2 more comments
I am using same directive for multiple instances of a toolbar. A toolbar has a button with a toggle functionality. So, if a first click does 'add' then another click does 'remove'. Here is a simplified directive that I am using:
a.directive("trendChartToolbar", function ($templateRequest, $compile) {
return {
scope: {
},
link: function (scope, elem, attrs) {
templateSRC = 'templateSRC.html';
$templateRequest(templateSRC).then(function (html) {
var template = angular.element(html);
$(elem).append(template);
template = $compile(template)(scope);
angular.element(elem).on('click', function (event) {
if (scope.state === undefined)
scope.state = true;
else
scope.state = !scope.state;
service.someMethod(event.target.name, scope);
});
});
}
};
});
Here is the template:
<div>
<img style="cursor:pointer;margin-right:10px" name="deviation"
src="image.svg" />
</div>
As long as only one instance of the directive exists everything works fine. scope.state changes from true to false and back. But if another instance exists then when I click on the first instance second time the scope has state property undefined. My expectation was that as long as I am using an isolated scope it would work. Any idea?
Thanks
angularjs
edited Nov 16 '18 at 18:07
georgeawg
34.7k115470
asked Nov 16 '18 at 17:03
MarkMark
91411437
Why are you attaching the click handler inside the.thenblock? Why not attach it immediately?
– georgeawg
Nov 16 '18 at 18:00
Why are you compiling the template? It doesn't have any AngularJS directives on it.
– georgeawg
Nov 16 '18 at 18:09
Yes, I dont have to compile, but it doesn't affect the problem. $templateRequest returns a promise that needs to resolve before using the loaded template.
– Mark
Nov 16 '18 at 19:19
Sure seems more complex than using simpleng-click. Also don't need$templateCacheif you usetemplateUrlin directive config
– charlietfl
Nov 16 '18 at 19:34
You are passing a scope reference toservice.someMethod. (Not a great practice.) That method is likely modifying the contents of the scope object and is likely the source of the problem.
– georgeawg
Nov 16 '18 at 20:24
|
show 2 more comments
I am using same directive for multiple instances of a toolbar. A toolbar has a button with a toggle functionality. So, if a first click does 'add' then another click does 'remove'. Here is a simplified directive that I am using:
a.directive("trendChartToolbar", function ($templateRequest, $compile) {
return {
scope: {
},
link: function (scope, elem, attrs) {
templateSRC = 'templateSRC.html';
$templateRequest(templateSRC).then(function (html) {
var template = angular.element(html);
$(elem).append(template);
template = $compile(template)(scope);
angular.element(elem).on('click', function (event) {
if (scope.state === undefined)
scope.state = true;
else
scope.state = !scope.state;
service.someMethod(event.target.name, scope);
});
});
}
};
});
Here is the template:
<div>
<img style="cursor:pointer;margin-right:10px" name="deviation"
src="image.svg" />
</div>
As long as only one instance of the directive exists everything works fine. scope.state changes from true to false and back. But if another instance exists then when I click on the first instance second time the scope has state property undefined. My expectation was that as long as I am using an isolated scope it would work. Any idea?
Thanks
angularjs
edited Nov 16 '18 at 18:07
georgeawg
34.7k115470
asked Nov 16 '18 at 17:03
MarkMark
91411437
I am using same directive for multiple instances of a toolbar. A toolbar has a button with a toggle functionality. So, if a first click does 'add' then another click does 'remove'. Here is a simplified directive that I am using:
a.directive("trendChartToolbar", function ($templateRequest, $compile) {
return {
scope: {
},
link: function (scope, elem, attrs) {
templateSRC = 'templateSRC.html';
$templateRequest(templateSRC).then(function (html) {
var template = angular.element(html);
$(elem).append(template);
template = $compile(template)(scope);
angular.element(elem).on('click', function (event) {
if (scope.state === undefined)
scope.state = true;
else
scope.state = !scope.state;
service.someMethod(event.target.name, scope);
});
});
}
};
});
Here is the template:
<div>
<img style="cursor:pointer;margin-right:10px" name="deviation"
src="image.svg" />
</div>
As long as only one instance of the directive exists everything works fine. scope.state changes from true to false and back. But if another instance exists then when I click on the first instance second time the scope has state property undefined. My expectation was that as long as I am using an isolated scope it would work. Any idea?
Thanks
angularjs
angularjs
edited Nov 16 '18 at 18:07
georgeawg
34.7k115470
asked Nov 16 '18 at 17:03
MarkMark
91411437
edited Nov 16 '18 at 18:07
georgeawg
34.7k115470
asked Nov 16 '18 at 17:03
MarkMark
91411437
edited Nov 16 '18 at 18:07
georgeawg
34.7k115470
edited Nov 16 '18 at 18:07
georgeawg
34.7k115470
edited Nov 16 '18 at 18:07
georgeawg
34.7k115470
34.7k115470
asked Nov 16 '18 at 17:03
MarkMark
91411437
asked Nov 16 '18 at 17:03
MarkMark
91411437
asked Nov 16 '18 at 17:03
MarkMark
91411437
91411437
Why are you attaching the click handler inside the.thenblock? Why not attach it immediately?
– georgeawg
Nov 16 '18 at 18:00
Why are you compiling the template? It doesn't have any AngularJS directives on it.
– georgeawg
Nov 16 '18 at 18:09
Yes, I dont have to compile, but it doesn't affect the problem. $templateRequest returns a promise that needs to resolve before using the loaded template.
– Mark
Nov 16 '18 at 19:19
Sure seems more complex than using simpleng-click. Also don't need$templateCacheif you usetemplateUrlin directive config
– charlietfl
Nov 16 '18 at 19:34
You are passing a scope reference toservice.someMethod. (Not a great practice.) That method is likely modifying the contents of the scope object and is likely the source of the problem.
– georgeawg
Nov 16 '18 at 20:24
|
show 2 more comments
Why are you attaching the click handler inside the.thenblock? Why not attach it immediately?
– georgeawg
Nov 16 '18 at 18:00
Why are you compiling the template? It doesn't have any AngularJS directives on it.
– georgeawg
Nov 16 '18 at 18:09
Yes, I dont have to compile, but it doesn't affect the problem. $templateRequest returns a promise that needs to resolve before using the loaded template.
– Mark
Nov 16 '18 at 19:19
Sure seems more complex than using simpleng-click. Also don't need$templateCacheif you usetemplateUrlin directive config
– charlietfl
Nov 16 '18 at 19:34
You are passing a scope reference toservice.someMethod. (Not a great practice.) That method is likely modifying the contents of the scope object and is likely the source of the problem.
– georgeawg
Nov 16 '18 at 20:24
Why are you attaching the click handler inside the
.then block? Why not attach it immediately?– georgeawg
Nov 16 '18 at 18:00
Why are you attaching the click handler inside the
.then block? Why not attach it immediately?– georgeawg
Nov 16 '18 at 18:00
Why are you compiling the template? It doesn't have any AngularJS directives on it.
– georgeawg
Nov 16 '18 at 18:09
Why are you compiling the template? It doesn't have any AngularJS directives on it.
– georgeawg
Nov 16 '18 at 18:09
Yes, I dont have to compile, but it doesn't affect the problem. $templateRequest returns a promise that needs to resolve before using the loaded template.
– Mark
Nov 16 '18 at 19:19
Yes, I dont have to compile, but it doesn't affect the problem. $templateRequest returns a promise that needs to resolve before using the loaded template.
– Mark
Nov 16 '18 at 19:19
Sure seems more complex than using simple
ng-click. Also don't need $templateCache if you use templateUrl in directive config– charlietfl
Nov 16 '18 at 19:34
Sure seems more complex than using simple
ng-click. Also don't need $templateCache if you use templateUrl in directive config– charlietfl
Nov 16 '18 at 19:34
You are passing a scope reference to
service.someMethod. (Not a great practice.) That method is likely modifying the contents of the scope object and is likely the source of the problem.– georgeawg
Nov 16 '18 at 20:24
You are passing a scope reference to
service.someMethod. (Not a great practice.) That method is likely modifying the contents of the scope object and is likely the source of the problem.– georgeawg
Nov 16 '18 at 20:24
|
show 2 more comments
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53342358%2ftwo-instances-of-same-directive-overwrite-each-other%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53342358%2ftwo-instances-of-same-directive-overwrite-each-other%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Why are you attaching the click handler inside the
.thenblock? Why not attach it immediately?– georgeawg
Nov 16 '18 at 18:00
Why are you compiling the template? It doesn't have any AngularJS directives on it.
– georgeawg
Nov 16 '18 at 18:09
Yes, I dont have to compile, but it doesn't affect the problem. $templateRequest returns a promise that needs to resolve before using the loaded template.
– Mark
Nov 16 '18 at 19:19
Sure seems more complex than using simple
ng-click. Also don't need$templateCacheif you usetemplateUrlin directive config– charlietfl
Nov 16 '18 at 19:34
You are passing a scope reference to
service.someMethod. (Not a great practice.) That method is likely modifying the contents of the scope object and is likely the source of the problem.– georgeawg
Nov 16 '18 at 20:24