Question

我有一个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
                    });
                }
            };
        }
);

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

Answer 1

我可以尝试猜测。

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

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

var button $(....);

然后使用content方法将此值传递给button.on('click')选项，并使用按钮来点击事件按钮。

Answer 2

拜托，看看这个问题/答案：

How to replace a html content with jsf reRender or ajax load, and rebind the new DOM with AngularJS?

它展示了如何重新塑造＆＃34; jquery更改后的angularjs，以及如何从jQuery调用angularjs函数。

但是，简而言之，您可以使用类似的代码从范围调用angularjs函数（通过id标识您的控制器）：

$('#idFromMyController').scope().myFunction();

AngularJS在指令中附加范围功能

2 个答案: