AngularJS指令：テンプレートをコンパイルしてスコープを見る

Question

私はかなり複雑なアプリケーションをAngularjsに書いています。これは既に私を混乱させるのに十分な大きさです。私はAngularをより深く研究し、私のコードは悪いと思う。 私はこの概念を理解する：

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

私の質問は以下のとおりです。

方法スコープ変数でテンプレートをコンパイルするには？

スコープ変数の監視方法は？

ディレクティブを2つに分割する必要がありますか？もし私がすれば、正しい方法でそれをする方法？

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

ディレクティブで属性にアクセスするためのtemplateための機能を追加最後の数週間にリリース角度1.1.4：

例：

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