एंगुलरजेएस निर्देश: टेम्पलेट संकलित करें और स्कोप देखें

Question

मैं अंगुलरजेज़ पर एक सुंदर जटिल अनुप्रयोग लिख रहा हूं। यह मुझे भ्रमित करने के लिए पहले से ही काफी बड़ा है। मैं कोणीय गहराई से शोध करता हूं और मुझे लगता है कि मेरा कोड खराब है। मैं इस अवधारणा को समझने:

module.directive('createControl', function($compile, $timeout){ 
    scope: { 
      // scope bindings with '=' & '@' 
      },                             
    template: '<div>Template string with binded {{ variables }}</div>',   
    link: function(scope, element, attrs){ 
      // Function with logic. Should watch scope. 
      } 

मैं कई समस्याएं हैं:

• मेरे टेम्पलेट जटिल है, मैं टेम्पलेट का हिस्सा है जो गतिशील
• लिंक समारोह में जा रहा संकलित टेम्पलेट संलग्न करने के लिए की जरूरत है तत्व के लिए, प्रतिस्थापित नहीं।
• मेरे टेम्पलेट ऊपर अवधारणा के साथ किसी भी प्रक्षेप बिना जोड़ दिए जाते हैं ...

तो मेरी कोड है कि सरलीकृत ध्यान में रखते हुए की तरह लग रही है:

module.directive('createControl', function($compile, $timeout){ 
    scope: { 
       var1: '@var1', 
       var2: '@var2', 
       var3: '@var3' 
      },                             
    template: '<div>{{ var1 }} {{ var3 }}</div>',   
    link: function(scope, element, attrs){ 
       $('.someelement').on('event', function(){ 
       var2 = 'SNIPPET'; // Need to watch it 
       }); 
       var3 = '<span>{{ var2 }}</span>'; 
      } 
    }) 

मेरे सवालों का है:

कैसे स्कोप चर के साथ मेरे टेम्पलेट संकलित करने के लिए?

स्कोप चर कैसे देखें?

क्या मुझे दो के लिए अपना निर्देश विभाजित करना चाहिए? अगर मुझे चाहिए, तो इसे सही तरीके से कैसे करें?

Answer 1

मैं करके अपने निर्देश को बदलने लगता है:

module.directive('createControl', function($compile, $timeout){ 
    scope: { 
       var1: '=var1', 
       var2: '=var2', 
       var3: '=var3' 
      },                             
    template: '<div>{{var1}} {{var3}}</div>',   
    link: function(scope, element, attrs){ 
       $('.someelement').on('event', function(){ 
       scope.var2 = 'SNIPPET'; // Need to watch it 
       }); 
       /*I do not see what you want to do*/ 
       scope.var3 = $compile('<span>{{var2}}</span>')(scope); 
      } 
    }) 

Answer 2

कोणीय 1.1.4 template के लिए जोड़ा क्षमता पिछले कुछ सप्ताहों में जारी निर्देशों में विशेषताओं का उपयोग करने की:

उदाहरण:

app.directive('mytest',function(){ 
    return { 
    restrict:'E',  
    template:function(elem,attrs){  
     return '<div>'+attrs.a+' '+attrs.b+'</div>'; 
    } 
    } 
}); 

<mytest a="Hello" b="World"></mytest> 

DEMO

देखें directive docs for version 1.1.4