Question

如果已经回答这个问题，我真的很抱歉，但我不知道如何搜索它，因为它看起来很具体。

我有一个使用ui-router的AngularJS应用程序，可以将多个视图动态加载到同一个<ui-view>元素中。我想在ui-router动态加载的h3元素之一上使用Jquery UI的工具提示函数，但我不知道在初始化程序的位置使得它在h3位于DOM之后运行。

我尝试过的事情：

在调用<script>

$("h3").tooltip()

将脚本标记放在主父HTML模板中 - 包含和不包含document.ready包装
将tooltip()函数调用放入加载部分的角度js文件之一（当我将行更改为alert()时），似乎此代码在部分呈现之前正在运行，所以还没有<h3> s）

我对如何在动态加载的元素上运行任意javascript代码感到很困惑......我认为第一种方法应该有效。即使我将<script>标记只包含一个简单的alert()，也没有任何反应。

有什么想法吗？我也很乐意提供更多信息，但我认为由于NDA，我无法显示实际代码。

Answer 1

这些可以帮到你：

Embed javascript in angular ui-router view

AngularJS: How to make angular load script inside ng-include?

Answer 2

您正在采取的方法来使工具提示工作是非常错误的。您应该将工具提示插件包装在指令中并将该指令分配给您的h3元素，而不是尝试在视图中动态加载脚本。或者，更简单，使用Angular UI Bootstrap的Tooltip指令：http://angular-ui.github.io/bootstrap/

自定义指令的模拟代码：

'use strict';

angular.module('MyModule')
    .directive('tooltip', function () {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                // initialize jQuery tooltip
                // note element is a jqLite object with jQuery methods available
                // DO NOT ATTEMPT TO WRAP element WITH jQuery
                // ANGULAR CANNOT TRACK jQuery OBJECTS THAT
                //   ARE NOT WRAPPED WITH jqLite!!!
                element.tooltip(...);
            }
        };
    });

在角度ui-router视图中嵌入javascript

2 个答案: