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

Question

我正在angular.js 1.x中创建指令

我将指令称为：

<mydirective dirarg={{value-1}}></mydirective>

我想通过在指令的链接函数中放置用于操作DOM的代码来创建指令。 链接函数生成的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 ，对testt（）的调用将中断。

app.directive('calendar',function($compile){
    return{
        scope:{
            dirarg: '@'
        },
        link: function(scope, element, attributes){
            element.append($compile("<button ng-click='testt()'>"+scope.dirarg+"</button>")(scope));
        } 
    }
});

现在，此代码使用dirarg填充按钮的文本，但是ng-click功能中断。 有人知道我如何才能同时执行ng-click和访问指令的参数吗？

明确地说，此按钮只是一个示例。 我的实际情况比一个按钮要复杂得多，所以不要告诉我更好的方法来制作有角度的按钮。

Answer 1

当将范围属性添加到指令选项时，它使指令成为隔离的范围，您也需要在指令内部传递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));
        } 
    }
});