从 angularjs 模板变量调用隔离作用域函数

Question

我进行了搜索，但未能找到该特定问题的确切答案。

我有指令

(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;
                }
            }
        }
    });
})();

我的html

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

该元素在 table 中，并且 tr 元素在我的控制器的 userList 中有一个 ng-repeat。控制器是通过我的 stateProvider 定义的。

当我尝试这样做时运行遇到的问题是，在我的 html 中，模板的 <use> 元素上的 xlink:href 只是说 constructUseHref( ).我的代码中是否遗漏了什么？请帮助:)

提前致谢！

Answer 1

您的主要问题的答案已在问题 "angular ng-href and svg xlink" 中找到，这意味着您需要做的就是将模板中的 <use> 标记更改为：

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

该问题的答案说您可能还需要在 ng-attr- 之后添加 xlink:href=""，但是对于 Angular 1.4.12，它可以不使用。

旁注：replace 采用布尔值，而不是字符串。所以它应该是 replace: true, 而不是 replace: "true",。（由于 JS 将非空字符串视为真实的方式，它在这种情况下有效，但 replace: "false" 与 replace: true 相同，所以不要使用字符串）。

从 angularjs 模板变量调用隔离作用域函数

Call isolate scope function from angularjs template variable

angularjs

angularjs-directive

angularjs-templates