7

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

我的问题是：

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

如何观察范围变量？

我应该把我的指令一分为二吗？如果我应该，如何以正确的方式做到这一点？

4

2 回答 2

9

过去几周发布的 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 的指令文档

于 2013-05-05T12:47:03.927 回答
3

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

 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);
            }
     })
于 2013-05-04T08:12:02.260 回答