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> 

요소는 테이블 내에와 TR 요소가 내 컨트롤러에서 userList 여기서에서 사용자와의 그것에서 NG 반복을 가지고 있습니다. 컨트롤러는 내 stateProvider를 통해 정의됩니다.

내가이 문제를 해결하려고 할 때 내 문제는 내 템플릿에서 <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과 같으므로 문자열을 사용하지 마십시오.