在Angular链接函数和访问指令参数中使用$compile

Use $compile inside Angular link function AND access directive arguements

本文关键字：compile 参数 指令 链接 Angular 函数 访问      更新时间：2023-09-26

我在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));
        } 
    }
});
相关文章：