Question

此代码无法在我的 AngularJS 文件中使用：

angular.element('document').ready(function() { $('.tooltipped').tooltip({delay: 50}); });

但当我在其中放入警告时，会弹出警告消息。虽然我已经包含了所有必需的具体化 CSS 和 js 文件，但工具提示代码无效。当我对静态元素使用相同的代码但不使用动态元素时，它工作正常。

Answer 1

这是因为angularjs重新呈现模板，因此DOM不再相同，并且没有附加插件。当使用angulajs时，jQuery插件通常不会起作用，因此你必须创建一个指令，允许angularjs协调插件初始化，以便在动态添加新元素时应用插件。

尝试这样的事情：

app.directive('tooltipped', function (){
    return {
        restrict: 'C',
        link: function (scope, elem, attrs) {
             $(elem[0]).tooltip({delay: 50}); });
        }
    };
});

Answer 2

你可以试试这个：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Tooltip - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $(document).ready(function(){
   $('#age').tooltip({delay: 50});
});

  </script>
  <style>
  label {
    display: inline-block;
    width: 5em;
  }
  </style>
</head>
<body>

<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
<p>Hover the field to see the tooltip.</p>


</body>
</html>

在AngularJS中没有工作提示

2 个答案: