Call isolate scope function from angularjs template variable

Question

I searched and wasn't able to find an exact answer to this particular question.

I have my directive

(function iife () {
var app = angular.module("MdfAngularApp");
    app.directive("actionButton", ['$compile', function ($compile) {
        var template = '<button class="icon" ng-disabled="!{{disable}}" ng-click="click()"><svg class="{{svgClasses}}" stroke="black"><use xlink:href="constructUseHref()"></use></svg><span>{{btnName}}</span></button>'
        return {
            restrict: "E",
            scope: {
                action: '&',
                sprite: '@',
                btnName: '@',
                svgClasses: '@',
                disable: '@',
                actionParams: "="
            },
            replace: "true",
            link: function (scope, element, attrs) {
                var spriteBaseUrl = "./Content/Images/mdf-sprite-sheet.svg";
                template = $compile(template)(scope);
                element.append(template);
                scope.click = function () {
                    scope.action(scope.actionParams);
                }
                scope.constructUseHref = function () {
                    return spriteBaseURL + "#"+ scope.sprite;
                }
            }
        }
    });
})();

My html

<action-button action-params="{user : user}" disable="{{manageRoleEnabled}}" svg-classes="small-icon" action="removeuser(user)" sprite="icon-close"></action-button>

The element is within a table and the tr element has an ng-repeat on it with user in userList from my controller. The controller is defined through my stateProvider.

The problem I run into when I try to do this is that in my html the xlink:href on the <use> element of my template simply says constructUseHref(). Am I missing something here in my code? Please help :)

Thanks in advance!

Assuming you meant the HTML that I am applying the directive to I have added that to my question. Please let me know if you need any more information — B.West
– B.West, Commented Aug 24, 2016 at 23:54

Community · Accepted Answer · 2017-05-23 12:14:57Z

1

The answer to you main question was found in the question "angular ng-href and svg xlink", and it means all you need to do is change your <use> tag in your template to:

<use ng-attr-xlink:href="{{constructUseHref()}}"></use>

The answer to that question says that you may also need to add xlink:href="" after the ng-attr- one, but with Angular 1.4.12, it worked without.

Side note: replace takes a boolean, not a string. So it should be replace: true, not replace: "true",. (Because of the way JS treats non-empty strings as truthy though, it works in this case, but replace: "false" would be the same as replace: true, so don't use strings).

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Aug 24, 2016 at 23:54

GregL

38.2k8 gold badges65 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

B.West Over a year ago

Thanks, that did it!

Collectives™ on Stack Overflow

Call isolate scope function from angularjs template variable

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related