我在angular.js 1.x中做了一个指令
我这样调用这个指令:
<mydirective dirarg={{value-1}}></mydirective>
我想通过在指令的链接函数中放置代码来操作DOM来创建指令。link函数生成的DOM的结构依赖于dirarg的值,我希望一些元素具有ng-click属性。
我已经设法让ng-clicks工作通过做以下:
app.directive('calendar',function($compile){
return{
link: function(scope, element, attributes){
element.append($compile("<button ng-click='testt()'>hi</button>")(scope));
}
}
});
当我点击这个指令生成的按钮时,函数testt()
运行。但是,如果我试图访问dirarg
,对test()的调用就会中断。
app.directive('calendar',function($compile){
return{
scope:{
dirarg: '@'
},
link: function(scope, element, attributes){
element.append($compile("<button ng-click='testt()'>"+scope.dirarg+"</button>")(scope));
}
}
});
这段代码现在用diarg填充按钮的文本,但是ng-click功能失效了。有人知道我怎么能有ng-click工作,并访问参数的指令?要清楚,这个按钮只是一个例子。我的实际情况要比按钮复杂得多,所以不要告诉我用angular制作按钮的更好方法。
当为指令选项添加scope属性时,它为指令创建了隔离的作用域,你也需要在指令内部传递testt函数,或者在指令内部定义testt函数链接函数
<mydirective dirarg={{value-1}} testt="testt"></mydirective>
app.directive('calendar',function($compile){
return{
scope:{
dirarg: '@',
testt: '='
},
link: function(scope, element, attributes){
element.append($compile("<button ng-click='testt()'>"+scope.dirarg+"</button>")(scope));
}
}
});