Clever Geek Handbook

How to set up dynamic generated id {{element}} inside angular directive

I have a requirement when I created a directive like below:

app.directive('popOver', function ($compile) {
    return {
        restrict: "A",
        link: function (scope, element, attrs) {
            // get template
            var templateId = element.data('popover-template');
            var templateHtml = $('#' + templateId).html();
            // compile content and class
            var popover_content = $compile(templateHtml)(scope);
            var popover_class = element.data('popover-class');

and in html page i passed id as angular expression like below

data-popover-template="{{field.popoverid}}"

After running the code, I get an error eg Error: Syntax error, unrecognized expression: {{field.popoverid}}

.

Can anyone help me with this issue?

+3


source to share


1 answer


The error is self-explanatory: an data-popover-template

expression is expected. So try this:

data-popover-template="field.popoverid"


The result of expression interpolation is {{}}

no longer an expression, so the directive cannot set data binding in this case.

0


source






More articles:


All Articles