कोणीय निर्देश - विशेषता मानों के आधार पर टेम्पलेट का चयन कैसे करें?

Question

मैं एक विजेट विकसित कर रहा हूं जहां मैं कुछ संदेशों/पाठ को एक के बाद प्रस्तुत करना चाहता हूं। मैं संदेश के प्रकार के आधार पर संदेश का टेम्पलेट बदलना चाहता हूं।

मेरे वर्तमान निर्देश सेटअप के रूप में

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

इस प्रकार के निर्देश के रूप में

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

अब मेरे सवाल इस प्रकार हैं प्रयोग किया जाता है: -

1. क्या यह संभव है एक वापस जाने के लिए टेम्पलेट फ़ंक्शन से एक्टू पर आधारित कई स्ट्रिंग्स (टेम्पलेट्स) विशेषता का अल मान msg। मैंने टेम्पलेट फ़ंक्शन में attrs.msg तक पहुंचने का प्रयास किया और यह value.type लौटा।

2. तो नहीं है, यह linker तहत टेम्पलेट में हेरफेर करने के लिए अच्छा है या मैं compile कार्य करने के लिए ले जाने के लिए की जरूरत है ?

Answer 1

आप ng-switch बयान का उपयोग कर सकते value.type के आधार पर एक अलग टेम्पलेट रेंडर करने के लिए:

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

इसके अलावा, अगर मैं अपने दूसरे प्रश्न समझ में आ: uncompiled निर्देश के हेरफेर compile समारोह में किया जाना चाहिए , संकलन के बाद होता है जो सभी हेरफेर link समारोह में जाना चाहिए।

Docs for ngSwitch

संपादित: +1 सेबेस्टियन को समझने जैसे आप चाहते हैं के लिए। हालांकि, वह जो प्रस्तावित कर रहा है वह अनिवार्य रूप से पहिया को पुनर्निर्मित कर रहा है, क्योंकि यह अनिवार्य रूप से संकलित और टेम्पलेट को मैन्युअल रूप से सम्मिलित कर रहा है (जो ngSwitch आपके लिए करता है)। साथ ही, फ़ंक्शन के attrs तर्क के माध्यम से आप अपने निर्देश पर दिए गए गुणों तक पहुंच सकते हैं।

Answer 2

template फ़ंक्शन में आपके पास आपके निर्देश के scope तक पहुंच नहीं है। आप गाया क्या हो जाता है तो आप इस का उपयोग करते हुए सशर्त तर्क कर सकते हैं (उदाहरण के लिए ng-switch) एक वैश्विक टेम्पलेट में के रूप में सुझाव द्वारा simoned नियंत्रण या एक 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)); 
    } 
    }; 
});