B.West B.West - 3 months ago 13
AngularJS Question

Call isolate scope function from angularjs template variable

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!

Answer

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).

Comments