AngularJS指令：编译模板和监视范围

我在Angularjs上编写了一个非常复杂的应用程序。这已经足够让我迷惑了。我更深入地研究Angular，并且看到我的代码很糟糕。我理解这个概念：AngularJS指令：编译模板和监视范围

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

我的问题是：

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

如何观察范围变量？

我是否应该将指令拆分为两个？如果我应该如何正确地做到这一点？

来源

2013-05-04 I159

如果愿意使用角1.4，template'加入用于'函数，它允许访问属性http://code.angularjs.org/1.1.4/ docs/guide/directive – charlietfl 2013-05-04 15:52:59

@charlietfl，你能否以你的评论作为回应的代码示例？ – I159 2013-05-05 12:30:28

我错了，还是你可以避免使用jQuery混合角？ – Ismael 2013-07-18 11:52:09

我想通过改变你的指令：

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-04 08:12:02 timactive

角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

来源

2013-05-05 12:47:03 charlietfl

请注意，如果我有与OP相同的问题，但这只是为我节省了一大堆时间感谢张贴。 – CallumD 2013-05-16 13:26:41

只是想我会指出，你为文档添加的链接不能直接链接到任何原因。你必须去[这里]（http://code.angularjs.org/1.1.4/docs/api），然后在右上角搜索'指令'。 – forrestranger 2013-06-21 13:28:09

AngularJS指令：编译模板和监视范围

回答

相关问题