Question

我在angular.js 1.x

中制作了一个指令

我按如下方式调用该指令：

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

我想通过在代码的link函数中使用代码来操作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

当将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));
        } 
    }
});

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

1 个答案: