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重复与用户在用户列表从我的控制器。控制器是通过我的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相同，因此不要使用字符串）。