템플릿에 지시어 이름을 전달하는 방법 - Angular.js

Question

비슷한 위젯을 생성하는 지시문이 있습니다. 각 위젯에는 다양한 지시문이 있습니다. 사용하는 데 필요한 지침을 선언

template: '<li><div {{widgetModel.directiveName}}></div></li>' 

나는 변수를 걸려는 화해하고 또는 템플릿 : 여기가 내 위젯을 만들 때 사용하는 템플릿입니다. 템플릿은 다음이 될 것입니다 :

template: '<li><div directive-name></div></li>' 

그때는 directiveName의 속성 이름을 가진 일반 지침 역할을합니다. 이것은 현재 코드에서 발생하지 않고 필요에 따라 동작하는 방법을 모르겠습니다. directiveName 지시문은 실제로 아무것도 될 수 있습니다.

Answer 1

당신은 컴파일 기능에서 이러한 변화 할 수있는 :

angular.module('myWidgets', []) 
    .directive('multiDirective', function() { 
    return { 
     restrict: 'E', 
     compile: function(element, attrs) 
     { 
      var htmlText = '<ul>' + 
        '<li ' + attrs.directiveName + '>' + '</li>' + 
       '</ul>'; 
      element.replaceWith(htmlText); 
     } 
    } 
}) 

을 그리고 당신은이처럼 호출 할 수 있습니다

<multi-directive directive-name='widget1' /> 

Answer 2

나는 Angular Dynamic Templates 블로그 게시물에서 힌트를 기반으로 a CodePen example을 만들어 그 I 다른 게시물에서 참조 된 톱.

<div ng-controller="ExampleCtrl"> 
    <div ng-repeat="dir in dirs"> 
    <div smart /> 
    </div> 
</div> 

및 컨트롤러 이런 식으로 뭔가 보이는 가정 :

function ExampleCtrl($scope) { 
    $scope.dirs = ["<div dir-a />","<div dir-b />"]; 
} 

가 smart 지시어는 다음과 같이 수 :

을 다음과 같은 HTML을하기 위해

.directive('smart', function($compile) { 
    return { 
     restrict: 'AE', 
     link: function (scope, element) { 
     element.html(scope.dir); 
     $compile(element.contents())(scope); 
     } 
    }; 
});