使用指令将jQueryUI主题应用于带Angularjs的按钮时的TypeError

Question

我有以下按钮：

<input type="button" jqButton data-ng-disabled="disableButton" 
       data-ng-click="toggleIsActive(foo)" />

在this answer之后，我创建了以下指令来应用jquery .button()主题：

app.directive('jqButton', function () {
    return function(scope, element, attrs) {
        element.button();
    };
});

我可以看到当我在Chrome开发工具中打破时，指令中的元素是正确的按钮，但是当应用.button()时，会抛出以下错误：

TypeError: undefined is not a function

我做错了什么？

Answer 1

element是jQuery还是jqLit​​e，具体取决于你是否加载jQuery。他们都没有button功能。请参阅文档：https://docs.angularjs.org/api/ng/function/angular.element和http://api.jquery.com/

为了避免遇到TypeError，请确保在angular之前加载jQuery和jQuery UI。然后button函数应该可用，您不应再收到错误。