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>

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

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

提前致谢！

Answer 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相同，所以不要使用字符串）。

从angularjs模板变量调用隔离范围函数

1 个答案: