{"id":1787,"date":"2022-08-30T15:19:26","date_gmt":"2022-08-30T15:19:26","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/12\/02\/directive-not-interpolating-in-a-template-string-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:19:26","modified_gmt":"2022-08-30T15:19:26","slug":"directive-not-interpolating-in-a-template-string-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/directive-not-interpolating-in-a-template-string-collection-of-common-programming-errors\/","title":{"rendered":"directive not interpolating, in a template string-Collection of common programming errors"},"content":{"rendered":"<p>I&#8217;m trying to conditionally build a template. I got a k2plugin directive with some divs and spans. According to the pluginui attribute, I want to insert another directive at the end of the template. My code, that follows, interpolates everything but pluginui For example, the last div results in:<\/p>\n<pre><code>\n<\/code><\/pre>\n<p>{{pluginui}} is literal, while it should interpolate to trigger the other directive. Funny thing is, if I put {{pluginui}} elsewhere in the same line (for example between the tags, it gets interpolated.<\/p>\n<p>What am I getting wrong?<\/p>\n<pre><code>app.directive(\"k2plugin\", function () {\n            return {\n                restrict: \"A\",\n                scope: true,\n                link: function (scope, elements, attrs) {\n                    console.log (\"creating plugin\");\n\n                    \/\/ this won't work immediatley. attribute pluginname will be undefined as soon as this is called.\n                    scope.pluginname = \"Loading...\";\n                    scope.pluginid = null;\n\n                    \/\/ observe changes to interpolated attributes\n\n                            \/\/ [...] observe name, id, width, height\n\n                    attrs.$observe('pluginui', function(value) {\n                        console.log('pluginui has changed value to ' + value);\n                        scope.pluginui = attrs.pluginui + \"viewport\";\n                    });\n\n                },\n                template: \"\\\n                           \\\n                           {{pluginname}}\\\n                           _ X\\\n                           \\\n                           \\\n                           \",\n                replace: true,\n            };\n        });\n\n        app.directive(\"canvasviewport\", function () {\n            return {\n                restrict: \"A\",\n                scope: true,\n                link: function (scope, elements, attrs) {\n                    console.log (\"creating canvas viewport\");\n                },\n                template: \"\",\n                replace: true\n            };\n        });\n\n        app.directive(\"divviewport\", function () {\n            return {\n                restrict: \"A\",\n                scope: true,\n                link: function (scope, elements, attrs) {\n                    console.log (\"creating div viewport\");\n                },\n                template: \"\",\n                replace: true\n            };\n        });\n\n        app.directive(\"autoviewport\", function () {\n            return {\n                restrict: \"A\",\n                scope: true,\n                link: function (scope, elements, attrs) {\n                    console.log (\"creating auto viewport\");\n                },\n                template: \"\",\n                replace: true\n            };\n        });\n<\/code><\/pre>\n<ol>\n<li>\n<p>I don&#8217;t think Angular will interpolate something into a directive name. {{}}s (automatically) set up a $watch. When the $watch notices a change, it will update the view, but it won&#8217;t call $compile, which is what I think needs to happen here.<\/p>\n<p>So, I would try generating the HTML\/template in the directive&#8217;s link function and then $compile it. Something like:<\/p>\n<pre><code>scope.$watch('pluginui', function(newValue) {\n   var jqLiteWrappedElement = angular.element('<\/code><\/pre>\n<\/li>\n<\/ol>\n<p id=\"rop\"><small>Originally posted 2013-12-02 01:31:20. <\/small><\/p>","protected":false},"excerpt":{"rendered":"<p>I&#8217;m trying to conditionally build a template. I got a k2plugin directive with some divs and spans. According to the pluginui attribute, I want to insert another directive at the end of the template. My code, that follows, interpolates everything but pluginui For example, the last div results in: {{pluginui}} is literal, while it should [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1787","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1787","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1787"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1787\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1787"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1787"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1787"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}