如何在 angularjs 指令中调用非 jquery 对象方法？

Question

我同时使用 Polymer 和 AngularJS，我希望页面在成功提交表单后显示祝酒词。

这是我的 HTML：

<div ng-view></div>
<paper-toast id="toast" text="{{$rootScope.message}}" show-toast></paper-toast>

我的$routeProvider已经为不同的路由指定了不同的模板和控制器，所以我把toast元素放在外面了。由于提交会导致页面跳转，所以我需要将消息放在toast元素可以访问的地方，即$rootScope.

和 JS:

app.directive('showToast', ['$rootScope', function($rootScope) {
    restrict: 'A',
    link: function($scope, element, attrs) {
        var toast = document.querySelector('#toast');
        if ($rootScope.message != '') {
            toast.show();
            toast.addEventListener('core-overlay-close-completed', function() {
                $rootScope.message = '';
            })
        }
    }
}])

但是出现错误说undefined is not a function at link，指向toast.show()。但是如果我把 link 函数的内容放到那个页面控制器中，它就可以工作了。

directive怎么了？正如你所看到的，link函数有一个参数element，但是由于show()方法不是jQuery方法，我不知道如何调用它通过 element.

Answer 1

删除此行

var toast = document.querySelector('#toast');

因为 toast 元素应该是 window 对象上的全局变量（如果有其他范围变量干扰它，您可以使用 window.toast 访问它）

Answer 2

抱歉。我犯了一个错误。 element 参数是 DOM 个节点的数组，因此我可以通过 element[0].show() 调用 show() 方法。如有混淆，请见谅。

如何在 angularjs 指令中调用非 jquery 对象方法？

How to call a non-jquery object method inside an angularjs directive?

javascript

jquery

angularjs

angularjs-directive

polymer