0

我搜索并找不到这个特定问题的确切答案。

我有我的指示

(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>

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

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

提前致谢！

4

1 回答 1

1

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

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

该问题的答案表明，您可能还需要在xlink:href=""后面添加ng-attr-，但在 Angular 1.4.12 中，它没有工作。

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

于 2016-08-24T23:54:32.973 回答