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

我的问题是:

如何使用范围变量编译我的模板？

如何观察范围变量？

我应该将我的指令拆分为两个吗？如果我应该,如何以正确的方式做到这一点？

Answer 1

过去几周发布的Angular 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

请参阅1.1.4版的指令文档

Answer 2

我认为通过以下方式更改您的指令：

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