AngularJS在指令中附加作用域函数

AngularJS Attach Scope Function in Directive

本文关键字：作用域 函数 指令 AngularJS      更新时间：2023-09-26

我有一个 AngularJS 指令，它将 jQuery Tooltipster 附加到ng-repeat中的元素，如下所示：

视图：

div.chat-wrapper
    ul.chat-messages
        li(ng-repeat='chat in chatmessages' chat-tooltip)

命令：

angular.module('app')
    .directive('chatTooltip',
        function() {
            return {
                restrict: 'A',
                link: function(scope, el, attrs) {
                    scope.mute = function() {
                        console.log('hello world');
                    };
                    $(el).tooltipster({
                        content: $('<button ng-click="mute()" class="btn">Mute</button>'),
                        position: 'left',
                        positionTracker: true,
                        trigger: 'hover',
                        interactive: true,
                        autoClose: false
                    });
                }
            };
        }
);

我想调用scope或$scope中定义的mute()函数 - ？由于插件在指令中添加了 HTML 内容 - 我不确定我需要做什么？

我可以试着猜测。

这里的问题是你的html是由jQuery解析的。而不是通过角度的解析器。

因此，在您提供任何自定义并调用预定义方法之前，我建议您为内容创建一个元素：

var button $(....);

然后将此值传递给content选项，并使用button.on('click')方法强制订阅按钮的单击事件。

请看一下这个问题/答案：

如何用jsf reRender或ajax load替换html内容，并使用AngularJS重新绑定新的DOM？

它展示了如何在jquery更改后"重新绑定"angularjs，以及如何从jQuery调用angularjs函数。

但是，简而言之，您可以使用这样的代码从作用域调用 angularjs 函数(通过 id 标识您的控制器(：

$('#idFromMyController').scope().myFunction();
相关文章：