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方法，我不知道如何通过{ {1}}。

Answer 1

删除此行

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

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

Answer 2

道歉。我犯了一个错误。 element参数是一个DOM节点数组，因此我可以通过show()调用element[0].show()方法。很抱歉让人感到困惑。

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

2 个答案: