Chỉ thị góc - Cách chọn mẫu dựa trên giá trị thuộc tính?

Question

Tôi đang phát triển một tiện ích mà tôi muốn hiển thị một số tin nhắn/văn bản. Tôi muốn thay đổi mẫu của thông báo dựa trên loại tin nhắn.

thiết lập chỉ thị hiện tại của tôi là như sau

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 
    } 
    }; 
}); 

Chỉ thị được sử dụng như sau

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

Bây giờ câu hỏi của tôi là -:

1. Có thể trả lại một của nhiều chuỗi (mẫu) từ chính hàm mẫu dựa trên actu al giá trị của thuộc tính msg. Tôi đã thử truy cập attrs.msg trong chức năng mẫu và nó trả lại value.type.

2. Nếu không, có tốt khi thao tác mẫu theo linker hoặc I cần phải di chuyển mẫu đến hàm compile?

Answer 1

Để làm cho một mẫu khác nhau dựa trên value.type bạn có thể sử dụng ng-switch tuyên bố:

<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> 

Ngoài ra, nếu tôi hiểu câu hỏi thứ hai của bạn: Thao tác với chỉ thị uncompiled nên được thực hiện trong compile chức năng , tất cả các thao tác xảy ra sau khi biên dịch phải đi theo chức năng link.

Docs for ngSwitch

EDIT: +1 để Sebastian để hiểu những gì bạn muốn. Tuy nhiên, những gì ông đang đề xuất về cơ bản là phát minh lại bánh xe, vì nó chủ yếu là biên dịch và chèn mẫu theo cách thủ công (đó là những gì ngSwitch làm cho bạn). Ngoài ra, bạn có thể truy cập các thuộc tính bạn đặt trên chỉ thị của mình thông qua đối số attrs của hàm link.

Answer 2

Trong chức năng template bạn không có quyền truy cập vào số scope của chỉ thị của bạn. Nếu bạn muốn kiểm soát những gì được trả lại bạn có thể làm bằng logic có điều kiện này (ví dụ ng-switch) trong một mẫu toàn cầu theo đề nghị của simoned hoặc sử dụng một hàm link:

.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)); 
    } 
    }; 
});