I writing a pretty plex application on Angularjs. This is already big enough to confuse me. I research Angular deeper and I see my code is bad. I understand this concept:

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

I have several problems:

• My template is plicated, I have part of template which going in the link function dynamically
• I need to append piled template to the element, not to replace.
• With concept above my template are appended without any interpolation...

So my code is looking like that in simplified view:

module.directive('createControl', function($pile, $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>';
            }
     })

My questions is:

How to pile my template with scope variables?

How to watch scope variables?

Should I split my directive for two? If I should, how to do it in right way?

I writing a pretty plex application on Angularjs. This is already big enough to confuse me. I research Angular deeper and I see my code is bad. I understand this concept:

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

I have several problems:

• My template is plicated, I have part of template which going in the link function dynamically
• I need to append piled template to the element, not to replace.
• With concept above my template are appended without any interpolation...

So my code is looking like that in simplified view:

module.directive('createControl', function($pile, $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>';
            }
     })

My questions is:

How to pile my template with scope variables?

How to watch scope variables?

Should I split my directive for two? If I should, how to do it in right way?

• javascript
• angularjs
• angularjs-directive

• if willing to use angular 1.4 , function for template was added that allows access to attributes code.angularjs/1.1.4/docs/guide/directive – charlietfl Commented May 4, 2013 at 15:52
• @charlietfl, could you make your ment as a response with an example of code? – I159 Commented May 5, 2013 at 12:30
• 1 Am i wrong or could you avoid using jQuery mixed with angular? – Ismael Commented Jul 18, 2013 at 11:52

2 Answers 2

Angular 1.1.4 released in last few weeks added ability for template to access attributes in directives:

Example:

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

See directive docs for version 1.1.4

I think change your directive by :

 module.directive('createControl', function($pile, $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 = $pile('<span>{{var2}}</span>')(scope);
            }
     })