Dyrektywy kątowe - jak wybrać szablon na podstawie wartości atrybutu?

Question

Opracowuję widget, w którym chcę renderować niektóre wiadomości/tekst jeden po drugim. Chcę zmienić szablon wiadomości na podstawie typu wiadomości.

moja obecna konfiguracja dyrektywy brzmi następująco

directive('cusMsgText', function(){ 
    return { 
    restrict: 'E', 
    template:function(elements, attrs){ 
     return '<div></div>'; 
    }, 
    link: function($scope, iElm, iAttrs, controller) { 
     //add children to iElm based on msg values in $scope 
    } 
    }; 
}); 

Dyrektywa służy następująco

<div ng-repeat="(key, value) in chatUser.msg"> 
    <data-cus-msg-text msg="value.type"></data-cus-msg-text> 
</div> 

Teraz moje pytanie są -:

1. Czy to możliwe, aby powrócić jeden wielu ciągów (szablonów) z samej funkcji szablonowej od wartość atrybutu msg. Próbowałem uzyskać dostęp do attrs.msg w funkcji szablonu i to return value.type.

2. Jeśli nie to, Czy to dobrze manipulować szablon pod linker lub muszę przenieść go do compile funkcji?

Answer 1

Aby uczynić inny szablon w oparciu o value.type można użyć instrukcji ng-switch:

<div ng-switch="value.type"> 
    <div ng-switch-when="type1"> 
     //...template for type 1 here... 
    </div> 
    <div ng-switch-when="type2"> 
     //...template for type 2 here... 
    </div> 
</div> 

Ponadto, jeśli zrozumiałem swoje drugie pytanie: manipulowanie nieskompilowanego dyrektywy powinny być wykonywane w funkcji compile , cała manipulacja, która ma miejsce po kompilacji, powinna przebiegać w funkcji link.

Docs for ngSwitch

EDIT: +1 do Sebastiana dla zrozumienia tego, co chciałeś. Jednak to, co proponuje, jest w istocie odkrywaniem koła, ponieważ jest to zasadniczo kompilacja i ręczne wstawianie szablonu (co robi dla ciebie ngSwitch). Ponadto można uzyskać dostęp do atrybutów umieszczonych na dyrektywie za pomocą argumentu attrs funkcji link.

Answer 2

W funkcji template nie masz dostępu do scope swojej dyrektywy. Jeśli chcesz kontrolować, co zostanie wygenerowana można zrobić to za pomocą logiki warunkowej (np ng-switch) w szablonie globalnym jak sugeruje simoned lub użyć link funkcję:

.directive('cusMsgText', function($compile) { 
    return { 
    restrict: 'E', 
    scope: { 
     msg: '=', 
     item: '=' 
    }, 
    link: function(scope, element, attrs) { 
     templates = { 
     x: '<div>template x {{item.name}}</div>', 
     y: '<div>template y {{item.name}}</div>' 
     }; 

     var html = templates[scope.msg]; 
     element.replaceWith($compile(html)(scope)); 
    } 
    }; 
});